ComboBox should not expand with line-height setting on parent

[Adam Peller]

Jon argues that changing the line-height on the parent (e.g. an enclosing DIV) should not be inherited through the widget and therefore increase its height. This would be consistent with the way other Dijits like Button behave, as well as native HTML controls.

 <div style="height: 100px; line-height: 100px;">
   <input type="button" data-dojo-type="dijit.form.Button" intermediateChanges="false" label="Button" iconClass="dijitNoIcon"></input>
   <select data-dojo-type="dijit.form.ComboBox" value="Item 1" intermediateChanges="false" trim="false" uppercase="false" lowercase="false" propercase="false" invalidMessage="$_unset_$" pageSize="Infinity" searchDelay="200">
    <option value="Item 1" selected="true">
Item 1</option>
    <option value="Item 2">
Item 2</option>
    <option value="Item 3">
Item 3</option>
   </select>
</div>

[Adam Peller]

see ​https://github.com/maqetta/maqetta/issues/2184 for discussion

[Douglas Hays]

This appears to be a Chrome specific rendering bug. ComboBox already specifies line-height:normal on the outer domNode DIV but that is ignored by Chrome (works fine on IE and FF). The trigger seems to be font:inherit which causes the previous line-height:normal to be ignored. I can workaround this by simple reordering font:inherit to come before line-height:normal within the dijitReset rule.

[Douglas Hays]

In [29809]:

Fixes #16086. Within CSS rules, line-height: specificity must come after font: since the latter is a shortcut that includes line-height.