LabelField and setLabelStyle

[sjzaluk]

I am adding a LabelField to a FormPanel but when I set the style of the label with:

invalidLogin.setLabelStyle("font-weight:bold;color:red");

the style is only being applied to the field label and not the text. How can I get that styling applied to the text also?

Thanks,
Steve

[gslender]

you need to set styles in toggle case like fontWeight

and use Field.addInputStyleName for the input field

[sjzaluk]

Thanks for the info. I added the following:

invalidLogin.addInputStyleName("font-weight:bold;color:red");

But it's still not rendering it properly. What am I missing? What do you mean by "you need to set styles in toggle case like fontWeight"?

Thanks,
Steve

[gslender]

my bad :( the method requires the style name, not attributes... so you have to add something like this to a custom css file and include it...



.invalid-login {
font-weight:bold;color:red
}

[gslender]

What do you mean by "you need to set styles in toggle case like fontWeight"?


exactly that - in ExtGWT all style attributes need to be in toggle case like "fontWeight:bold" otherwise they don't work. In CSS files they are normal, just toggle case in the java methods

[sjzaluk]

I tried that also but it still doesn't work. Here is the code that I have that creates the field:


final LabelField invalidLogin = new LabelField();
invalidLogin.setFieldLabel("Field Test");
invalidLogin.setLabelStyle("font-weight:bold;color:red");
invalidLogin.setText("Invalid login credentials");
invalidLogin.addInputStyleName("fontWeight:bold;color:red");
loginFormPanel.add(invalidLogin);If you look at the setLableStyle call I use regular CSS syntax and it does work that way. For addInputStyleName I used both the toggle case and regaular CSS syntax but neither work. When I add this field to my form the 'Field Test:' text is bold red and the 'Invalid login credentials' is regaular black font. I am using Mac under both Safari and FF3.

Thanks for all your help.

--Steve

[gslender]

no - you need to follow my post a few up... :>

here is a step-by-step of what you need to do...

create a custom css file - lets call it MyApp.css with this in the contents

.invalid-login {
font-weight:bold;color:red
}

you then include that css file in your Module.gwt.xml

<module>
<stylesheet src="MyApp.css"/>
<inherits name='com.extjs.gxt.ui.GXT'/>
<entry-point class="com.modulepackage.client.Classname"/>
</module>


you then change your code to be...


invalidLogin.addInputStyleName("invalid-login");

I tried this and it does work... :D