Opened 6 years ago

Closed 3 years ago

#17201 closed defect (fixed)

Select: setting width in CSS class makes arrow icon wider

Reported by: DojoNovice@… Owned by:
Priority: low Milestone: 1.11
Component: Documentation Version: 1.9.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

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.

Change History (8)

comment:1 Changed 6 years ago by bill

Component: DijitDijit - Form

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

comment:2 Changed 6 years ago by bill

Owner: set to Douglas Hays
Status: newassigned

comment:3 Changed 6 years ago by 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 :-).

comment:4 Changed 6 years ago by bill

Description: modified (diff)
Summary: dijit/form/Select - class value makes arrow icon widerSelect: setting width in CSS class makes arrow icon wider

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.)

comment:5 Changed 5 years ago by Douglas Hays

Owner: Douglas Hays deleted
Status: assignedopen

comment:6 Changed 3 years ago by dylan

Component: Dijit - FormDocumentation
Milestone: tbd1.11

comment:7 Changed 3 years ago by dylan

Priority: undecidedlow

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.

comment:8 Changed 3 years ago by dylan

Resolution: fixed
Status: openclosed
Note: See TracTickets for help on using tickets.