Search code examples
csslabelsmartgwt

Label not Taking CSS Style in SmartGWT


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?


Solution

  • 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!