-1

So basically i created a dropdown menu using this method:

Controller:

        all_useroptions = []
        for opt in db().select(db.useroptions.ALL):
            all_useroptions.append(OPTION(opt.symbol, _value=opt.id))
        opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)

HTML:

 {{=opt_sel}}

Is it possible to edit the "dropdown" part of the menu? I can edit the "button" of my menu using CSS: 

        #opt_id {
        color: rgb(105,105,105);
        padding: 10px 10px;
        text-align: center;
        border-radius: 5px;
        display: inline-block;
        font-size: 20px;
        margin: 10px 5px;
        cursor: pointer;
        position: relative;
        min-width: 160px;
        }

But that only changes the button and not my menu. I would like to make the menu "prettier" by changing its shape, color and height and add some text between the options. Anybody knows how to do that?

mind_the_gap
  • 41
  • 5

2 Answers2

1

In your final HTML that is output to the page (inspect the page generated by your python script to find what it makes), you could add a custom js snippet to further modify the HTML, modifying elements dynamically based on what the initial code output.

    ...template code above that contains yours {{=opt_sel}}...

    <!-- javascript snippet you add at bottom of page to change html above -->
    <script>
       document.querySelectorAll(".classOnABunchOfElementsMadeByOptSel > li").style.background = "red";
       document.querySelector("#secondElementMadeByOptSel").style.margin = "20px";

    </script>

see How do I change an HTML selected option using JavaScript?

and for a more basic primer on how to modify HTML with javascript: https://www.w3schools.com/js/js_htmldom_elements.asp

Ryu S.
  • 1,538
  • 2
  • 22
  • 41
0

Just add the _class to the OPTION helper list of arguments:

all_useroptions = []
for opt in db().select(db.useroptions.ALL):
    all_useroptions.append(OPTION(opt.symbol, _value=opt.id, _class='prettier'))
opt_sel = SELECT(*all_useroptions, _name='opt_id', value=request.vars.opt_id)

And create a "pretier"css definition with your preferences

For more information, consult the web2py documentation for the HTML helpers: http://web2py.com/books/default/chapter/29/05/the-views#HTML-helpers

    *Named arguments that start with an underscore are interpreted as HTML tag attributes (without the underscore)*
silver
  • 126
  • 5