Fixing font height to match GXT

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%
}

Advertisements