CODEWITHSUNDEEP
javascriptformsselectdojo
Steffen
Steffen

Reputation: 2237

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

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!

Upvotes: 8

Views: 10032

Answers (5)

MuSheng
MuSheng

Reputation: 351

try this

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

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

Upvotes: 0

Cjxcz Odjcayrwl
Cjxcz Odjcayrwl

Reputation: 22847

Give style to constructor:

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

Upvotes: 3

James
James

Reputation: 12182

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;
}

Upvotes: 9

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

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.

Upvotes: 3

Bishnu
Bishnu

Reputation: 873

I would use 

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

Upvotes: 1

Related Questions