Dojo Select Set Maximum Width

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

Solution 1:

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