3

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)

1

Override .dijitMenuItem like so:

.dijitMenuItem {
  font-size: 2em;
}

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

  • 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"> – JasonBK Jan 14 '14 at 14:16
  • 1
    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? – Derek Swingley Jan 14 '14 at 17:04
  • no, that was it! I moved my css sheet to be included after esri.css and now it works, thanks! – JasonBK Jan 14 '14 at 17:36
  • You're welcome! Glad I could help. – Derek Swingley Jan 14 '14 at 18:13
  • a related question - is there a way to limit the number of characters in this list (something like maxlength for input forms)? thanks – JasonBK Jan 15 '14 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.