FieldLabel.setStyleName causes the corresponding widget to be misaligned

[chuckie474]

I have a FieldLabel and I want to set the style to be bold. However, when I call setStyleName, the corresponding widget gets moved down a line so it isn't aligned with the field label:

So this code:

FieldLabel name = new FieldLabel();
name.setText("Name");
name.setStyleName("boldText");
TextField nameFld = new TextField();
nameFld.setEmptyText(""Enter your name...");
name.add(nameFld);

Looks like this:
fldLabel.jpg

Doing things such as:
name.addStyleName("boldText");
or
name.setStyleName("boldText", true)
keeps the alignment, but it results in the style not getting recognized and displays in plain text.

Has anyone seen this or figured out a workaround? If I set the style to something different, such as changing the color to red, the addStyleName works - for some reason it just doesn't like the text to be bold.

[Colin Alworth]

How is your boldText css style defined? Have you tried addStylename instead?

I suspect setStyleName is *replacing* the existing styles instead of adding a new one, so you are removing the styles that the FieldLabel needs to function correctly.

We could make this harder to break by adding an extra wrapper around the FieldLabel dom contents, but that would make the dom unnecessarily bigger.

[chuckie474]

boldText is defined as:

boldText {font-size: 11px; font-weight: bold}

I did try addStyleName but the font-weight doesn't get rendered at all.

I ended up creating my own wrapper around FieldLabel with new attributes called labelStyle and labelText, and then when it gets rendered, I do a:

super.setHTML("<span class=\"" + labelStyle + "\">" + labelText + "</span>");

That seems to do the trick.