dojo select set maximum width

Question

i have a problem with the width of my dojo select. The option of the select widget are filled by an ajax call. A few of the labels are very long and the width of the select widget grows with the large of the label. Is there a way to set the maximum width of the select widget? So that the width don't grow over 180px? PS: I implement the widget by programmatically way like

new Select({
    name: "select2"
}).placeAt(win.body())

Edit: Here for example http://jsfiddle.net/5r3gR/3/ when i select the "VeryVeryVeryLongLabel" the width of the select dijit changes but it should stay at the width.

James Sampica James Sampica · Accepted Answer · 2014-07-08T22:20:30

I used the claro theme with the added rule of...

.dijitSelectLabel {
    text-align:left;
    overflow: hidden;
    width:100px;
}

Which makes the width of the textbox static at 100px. The dropdown options will still expand out to the biggest width of your option

JSFiddle

To style different selects with different widths make the following changes

Css

.bigSelect .dijitSelectLabel {
    text-align:left;
    overflow: hidden;
    width:200px;
}

.smallSelect .dijitSelectLabel {
    text-align:left;
    overflow: hidden;
    width:100px;
}

Code

var big = new Select({
    store: os,
    class: "bigSelect"
}, "target");

var small = new Select({
    store: os,
    class: "smallSelect"
}, "target");

JSFiddle

dojo select set maximum width

1 Answers