How do I set the width of dijit.form.Select?

Question

I have a programmatically generated dijit.form.Select. Unlike most other widgets, the Selects do not offer a resize method like

dijit.resize({w: width, h: height});

I have not found a standardized way of setting the width of a select. This is quite bad because the autosizing makes Dialogs "explode" on long select values.

Is there a standard way to resize a select I have missed? Or do I have mess with the markup of the select the hard way?

Thanks!

Answer 1

This can be achieved with CSS by setting the width of the inner label like this:

.tundra .dijitSelect .dijitButtonText {
    text-align: left;
}

.tundra .dijitSelectLabel {
    width: 120px;
    overflow: hidden;
}

Answer 2

Why wouldn't you simply do this by setting the widget's style?

http://jsfiddle.net/QEjYD/1/

Unfortunately, due to how the widget is written, this doesn't work if you hook up the width in a CSS class, or if you set the width style after the widget has been created.

Answer 3

Give style to constructor:

var mySelect = new Select({
      id: 'mystatus',
      name: 'mystatus',
      style: {width: '150px'},
      required : false, 
      store: os,
      searchAttr: 'label',
  }, "mystatus");

Answer 4

I would use

dojo.marginBox(selectWidget.domNode, {w: width, h:height})

Answer 5

try this

.dijitSelect .dijitButtonNode {
  width: 16px !important;
}

dom-style.set(dojo.query('.dijitSelect')[0], 'width', with);