CODEWITHSUNDEEP
formsselectdojo
Jacob
Jacob

Reputation: 4031

Style dijit.form.Select drop down menu

How can I style a dijit.form.Select drop down menu if a use the HTML markup. 

<select id="sourceselect"   dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>

To make it clear it want to style the drop down menu that is filled with the content. I want to change the height of that menu and have a scroll bar if the height is exceeded.

I am using Dojo version 1.6. Here is a Fiddle example: http://jsfiddle.net/NH7dd/.

Edit: Why the minuses?

Upvotes: 0

Views: 1832

Answers (2)

Matt R
Matt R

Reputation: 734

You can set the property for maxHeight.

<select id="sourceselect"   
dojoType="dijit.form.Select"
data-dojo-props="maxHeight: 200" 
style='width:200px' 
onChange="changeDetected();">
</select>

Also, the newer syntax for dojo is "data-dojo-type" instead of "dojoType".

Here is JSFiddle showing the maxHeight property. (I used dojo 1.9, but maxHeight is available in 1.6) http://jsfiddle.net/NH7dd/17/

Upvotes: 0

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44745

The menu that is generated by Dojo is placed in the root of the DOM node. It's a common mistake that the menu is somehow relative positioned towards the textfield, but it isn't.

If you wish to change the style of the menu, then you could use the following CSS selector:

div[dijitpopupparent="sourceselect"] > .dijitMenu {
    /** Your CSS */
}

The reason this works is because the menu is wrapped inside a dijit/popup. This popup allows displaying/hiding the menu and as you can see it has an attribute dijitpopupparent which has the original ID of the field.

I also updated your JSFiddle, which now looks like this. But I don't really recommend changing the behavior of the menu like this, since you might mess up the original functionality/behavior of the combobox. I mean, right now I have problems going to certain values because one "scroll tick" already passes a value. With the updated style I can't even properly select "2" anymore.

EDIT: In the updated JSFiddle the scrollbar will always be visible, if you want the scrollbar only to appear when there are more options, then change overflow-y: scroll to overflow-y: auto.

Upvotes: 3

Related Questions