Select: setting width in CSS class makes arrow icon wider

[DojoNovice@…]

This example works fine.

    <div name="sort" style="width : 8.8em; padding : 0.1em;" data-dojo-type="dijit/form/Select">
      <span data-dojo-value="date">Date</span>
      <span data-dojo-value="user">User</span>
      <span data-dojo-value="dept">Department</span>
    </div>

Now I am moving CSS values from style attribute to style element - class named select.

     .select {
        width : 8.8em; 
        padding : 0.1em;
      }

    <div name="sort" class="select" data-dojo-type="dijit/form/Select">
      <span data-dojo-value="date">Date</span>
      <span data-dojo-value="user">User</span>
      <span data-dojo-value="dept">Department</span>
    </div>  

The result is wider arrow icon.

[bill]

That's true, that's not supported. I don't think we want to support it either but maybe Doug has different ideas.

[dojonovice@…]

Thank you Bill for response.

Better way is avoid to use inline styles. I prefer clean code :-) and classes. Doug, try to fix it, thanks :-).

[bill]

Note that setting when style, Select changes the baseClass from dijitSelect to dijitSelectFixedWidth, which sets width:100% on the .dijitButtonContents. So probably if you add this CSS it will work:

.select {
        width : 8.8em; 
}

.select .dijitButtonContents {
	width: 100%;
}

I don't know that there's anything better we can do besides documenting this. (Currently it isn't in the doc; it should be added.)

[dylan]

I hope to get to this ticket in time for 1.11 (setting a deadline of end of January). If not, this will get moved to 1.12.

[dylan]

Documented at ​https://github.com/dojo/docs/commit/877c17bab9846b83aafd00f19252892ea716ac1d .