Label not Taking CSS Style

[carlossierra]

I'm trying to apply basic Label style to the labels in my application. For this, I defined this simple ProjectName.css file:

HeaderTitle {
    font-size: 3em;
    color: #FFFFFF;
    text-align: left;
}

This is the Class where I try to set the style to the labels:

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;

public class HeaderArea extends HLayout {
    
    private static final String FONT_COLOR = "#FFFFFF";
    private static final String BACK_COLOR = "#002748";
    private static final String LOGO_FILE = "logo_focuss_blanco.png";
    private static final String LOGO_AND_TITLE_PERC = "90%";
    private static final int LOGO_SIZE = 50;
    
    String userName = "Admin";
    
    public HeaderArea() {

        super();
        this.setBackgroundColor(BACK_COLOR);
        
        HLayout westLayout = new HLayout(); 
        westLayout.setWidth(LOGO_AND_TITLE_PERC);
        westLayout.setLayoutLeftMargin(20);
        westLayout.setMembersMargin(20);
        
        HLayout eastLayout = new HLayout();
        eastLayout.setLayoutRightMargin(20);
      
        westLayout.addMember(new Img(LOGO_FILE, LOGO_SIZE, LOGO_SIZE));
        westLayout.addMember(createLabel("ProjectName", "HeaderTitle"));  
        eastLayout.addMember(createLabel(userName, "HeaderTitle"));
        
        this.addMember(westLayout);      
        this.addMember(eastLayout);

    }

    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 values are not being passed to the final page code...

Can you please help me figuring out how to make this work?

Thanks

[Isomorphic]

You need a "." before HeaderTitle in your CSS. Otherwise, you are attempting to style an element <HeaderTitle> rather than a <DIV> that has HeaderTitle as it's class.

[carlossierra]

Thanks for your reply. I changed my css to look like this:

.headerTitle {
    font-size: 3em;
    color: #FFFFFF;
    text-align: left;
}

Unfortunately, that didn't solved the problem...

[Isomorphic]

Now that your CSS is correct, you should use the built-in Developer Tools in your browser to see why your CSS is not applied.

It's probably something simple, like you are still loading the broken version from cache, or not loading it at all (URL is wrong).

[carlossierra]

Thanks again! Here is the source code form the generated page:



Again, the class definitions seems to be applied to the wrong element. Do you have any idea how to correct this? From my code, I would have thought that

label.setStyleName("headerTitle");

should be working correctly, applying the class to the label....

[Isomorphic]

There's nothing wrong with the generated HTML, now or before. Your CSS class is simply not active.

Please make an actual effort this time to look into the possibilities we named. This is not an issue with our framework, we've stepped in here to help with basic CSS usage.

[carlossierra]

Well, you were right about the problem not being in the HTML generated. Anyway, here is the solution, in case somebody else comes across this problem.

As it turns out, the problem was in the html file: 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!

[Isomorphic]

No, that would not make any difference.

Most likely, your <link> tag was previously in an invalid place (for example, neither in the <head> nor <body>), or again, the browser still using the old version of the file that had invalid definitions.

[carlossierra]

Thanks for your reply, and sorry for this late response. Indeed, that wasn't the problem either. After inspecting the generated HTML I found the problem was the name of the css class (HeaderTitle), which was also present in the css file of the selected skin (and that was taking precedence over the definition on BMSimulator.css). Changing the class name to bmHeaderTitle solved it.