change font size of elements in dropdown menu store

Question

I am creating of list of building names from a query, which then populates a dojo.ItemFIleReadStore. This store then populates a dropdown menu (using dijit.Form.ComboBox), where the user makes a selection.

My problem is that I cannot change the font size of the dropdown list. I can change the font size of the placeholder in the ComboBox, and also of the final selected result, but not the font size in the dropdown list itself.

Here is the HTML for the combo box:

<div id="list">
 <select id="menu" dojotype="dijit.form.ComboBox"
 value="autoComplete="true" placeholder="Options:" class="comboBoxClass" 
 required="false" onchange="executeSelectedQuery(this)">
 </select>
</div>

and here is the basics of the JS for the store item:

 var dataItems = {
 identifier : 'name',
 label : 'name',
 items : values
};
var menuStore = new dojo.data.ItemFileReadStore({
 data : dataItems,
 clearOnClose : true
});

I can change the font-size of the placeholder with .dijitInputField

and change the font-size of the result string with : input[type="text"]

in css, but neither of these will change the font size of the stored drop down list of items.

Ideas?

(I am using ArcMap 10.0 and ArcGIS Javascript API 3.4)

Answer 1

Override .dijitMenuItem like so:

.dijitMenuItem {
 font-size: 2em;
}

Example: http://jsbin.com/OkEtoci/1/edit

• JasonBK: Thanks...for some reason it isn't working for me though...could it be that I am using an older API (3.4), or that you are using the Memory class, while I am using ItemFileReadStore? here is what I see when I dig into Firebug in this div: <input id="schoolLayerSelect" class="dijitReset dijitInputInner" type="text" aria-haspopup="true" role="textbox" data-dojo-attach-point="textbox,focusNode" autocomplete="off" tabindex="0" aria-invalid="false" value="" aria-owns="schoolLayerSelect_popup" aria-activedescendant="schoolLayerSelect_popup0">
• Derek Swingley: What I posted works with 3.4, and using a memory store instead of itemfilereadstore shouldn't make a difference. Are you including the CSS I posted after you include the dojo theme style sheet (like tundra.css or claro.css) and the esri.css stylesheet?
• JasonBK: no, that was it! I moved my css sheet to be included after esri.css and now it works, thanks!
• Derek Swingley: You're welcome! Glad I could help.
• JasonBK: a related question - is there a way to limit the number of characters in this list (something like maxlength for input forms)? thanks