I'm trying to apply basic Label style to the labels in my SmartGWT application. For this, I defined this simple ProjectName.css file:
HeaderTitle {
font-size: 3em;
color: #FFFFFF;
text-align: left;
}
This is the function where I try to set the style to the labels:
private Label createLabel(String title, String style) {
Label label = new Label(title);
label.setStyleName(style);
return label;
}
And in my ProjectName.html file I have the following line to specify the use of my css definitions:
<link type="text/css" rel="stylesheet" href="ProjectName.css">
The problem is that the labels won't take any of the styling defined in the css file.
When I inspect the DOM of one of the labels, I get this:
<div id="isc_W" eventproxy="isc_Label_0" style="POSITION:relative;-webkit-margin-collapse:separate separate;VISIBILITY:inherit;Z-INDEX:200540;CURSOR:default;"><table role="presentation" cellspacing="0" cellpadding="0" width="100" height="54"><tbody><tr><td class="HeaderTitle" align="left" valign="middle" style="">Simulador AA</td></tr></tbody></table></div>
Where it seems like the css class is being properly assigned, but the css file values are not being used. I'm no expert in html/css, but it looks like the class is not being applied to the right element?
What am I missing here?
I figured it out: the reference to the css file in ProjectName.html
<link type="text/css" rel="stylesheet" href="BMSimulator.css">
Was before my SmartGWT skin module reference:
<script src="bmsimulator/sc/skins/Enterprise/load_skin.js"></script>
Changing the order of these two invocations made the css file to load properly!