GXT (2.1.1) uses fixed font heights in Internet Explorer. While there may be (possibly valid) readability arguments against this, that the way it is. Unfortunately when I added a Text component next to a ComboBox in a HorizontalPanel (as I’m not in a form), the text in the Text widget resizes while the text in the ComboBox doesn’t. Looks a bit ridiculous in hosted mode and IE6-8.
The key to fixing the font size and having the text match the ComboBox item text is the following CSS (required lines are commented):
font-size:12px; /*Set the font size to match combo item */
line-height:20px ; /*Set the line-height to match combo item */
The whole css is here:
.combo-text-label {
font-family:tahoma,arial,helvetica,sans-serif;
font-size:12px; /*Set the font size to match combo item */
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:20px ; /*Set the line-height to match combo item */
}
Apply this as the sole style to the Text component and the font size no longer grows as if it is changed in IE:
HorizontalPanel hp = new HorizontalPanel();
hp.setSpacing(6);
hp.setBorders(true);
hp.setVerticalAlign(VerticalAlignment.MIDDLE);
Text label = new Text("ComboLabel :");
label.setStyleName("combo-text-label");
label.setTagName("span");
hp.add(label);
hp.add(comboWidget);
.combo-text-label {
font-family:tahoma,arial,helvetica,sans-serif;
font-size:12px !important;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:20px !important;
padding: 2px;
height: 100%
}