Select: doesn't render well when width is set by a CSS class

[cranespud]

For a dijit.form.Select when the width is set by a class, the drop down arrow doesn't render correctly (it is not at the end as expected) but when the width is set using the 'style' attribute it does renders correctly. This happens using the claro theme; with tundra and soria thems the select simply don't resize as specified when using the class attribute.

OS: Slackware 13.1 Browser: Firefox 3.6.13 Dojo: 1.5 CDN

OS: Windows XP Browser: Firefox version: 3.6.2, Browser: IE version: 8.0.6001.18702 (with this one, the arrow is in the correct place but too wide) Browser: Safari 4.0.5 (531.22.7) Dojo: 1.5 CDN

Example:

.smallSelect {
width: 50px;
}

<select dojoType='dijit.form.Select' class='smallSelect'>
   <option val='1'>One</option>
   <option val='2'>Two</option>
</select>

<select dojoType='dijit.form.Select' style='width: 80px'>
   <option val='1'>One</option>
   <option val='2'>Two</option>
</select>

Keep on with the great work!!

[cranespud]

sorry, its easier to appreciate the error when using large sizes for example .smallSelect { width: 150px; }

[bill]

You need to add the dijitSelectFixedWidth class to your Select; then it will work. It's added automatically when you specify a style attribute including a width setting, but that's not feasible for adding a class attribute.

BTW, please attach test cases to all tickets using the "attach file" button. I'll attach a test case showing it working.

[bill]

working test case, put in dijit/tests/form/