PDA

View Full Version : ComboBox Height Variance in IE vs. FF



Cliff
15 Nov 2010, 11:30 AM
My ComboBox on a Toolbar renders differently in IE than in FF. Its height is too short in IE (always 21px). This is because the ComboBox is an HTML <input> which is nested inside its parent <div>. In IE only, this <div> is associated with the following CSS Selector:


.ext-ie .x-toolbar-cell .x-form-field-wrap {
height:21px;
}

There is no similar Selector applied to the parent <div> in FF. In IE, instead of 21px, Id prefer something along the lines of {height:96%}. Is there a best-practice way to override this selector on the parent <div>? Either from CSS or from an Ext config property? Is there a way to assign an ID to the parent <div> so that I can add a selector such as:


#myComboParentDivID {
height: 96% !important;
}

I added the following to my own CSS file and it solves the problem:


.ext-ie .x-toolbar-cell .x-form-field-wrap {
/* Override same selector in ext-all.css */
height: 96% !important;
}


Is there a better way?