Oops Null Pointer

Java programming related

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: