How to set width of a Dojo Combobox - html

Question

how do I control width of a dojo combobox using css, i tried #comboId{width:50px} where comboId is the Id of <select id="comboId">. but it does not work

Answer 1

ComboBox is a little tricky, because the way this widget works, the node with the id comboId will end up being the inner input node inside the widget, not the widget's top-level domNode (which receives the id widget_comboId instead). This is probably why that's having no effect for you.
Note that not nearly all widgets do funny things like this, but namely widgets like dijit.form.TextBox and dijit.form.ComboBox (and widgets that extend them) do.
Perhaps the simplest way around this would be to also add a class to your widget and style based on that instead (which is generally encouraged as it is more reusable than coupling specific IDs into your css anyway). Assuming you're instantiating declaratively:
<select id="comboId" class="comboClass" dojoType="dijit.form.ComboBox">
...
</select>
Then in your css:
.comboClass { width: 50px; }
Other solutions
If you're instantiating this widget declaratively, you can apply the style inline and it will become properly mapped to the widget's domNode automatically:
<select id="comboId" dojoType="dijit.form.ComboBox" style="width: 50px">
...
</select>
Alternatively, you can set the style attribute of the widget after it is instantiated:
dijit.byId('comboId').set('style', {width: '50px'});
This is programmatically the equivalent to setting the width style inline on the DOM node declaratively.

Answer 2

Setting width using css did not work for me. However, setting style at construction did:
var spatialQueryComboBox = new ComboBox({
id: "selectionType",
style:{width: "100px"},
store: spatialSelectionStore,
searchAttr: "name"
}, "spatialSelectionType");

Answer 3

Did you try:
dojo.style("comboId", "width", "50px");

Answer 4

It could be done by calling the function "forceWidth(true)", and define the class .mblComboBoxMenu with desired height in your css file.
for example:
.mblComboBoxMenu {
position: relative;
overflow-y: hidden !important;
overflow: hidden;
border: 1px solid #00677f;
border-radius: 0;
background-color: white;
color: #868e96;
width: 80% !important;
}