Applying CSS to Grid

Hello,

I am currently struggling to apply the proper CSS styles to my Grid component.

What I have is:

        <g:Grid ui:field="rankingGrid" styleName="{style.leaderboard}">

<!-- Header row -->

<g:row>

<g:customCell>

<g:Label ui:field="skillRangeLabel"></g:Label>

</g:customCell>

...

</g:row>

</g:Grid>

And the styles are 

<ui:style>

.leaderboard td {

padding: 3px 15px;

text-align: center;

font-size: medium;

}

.leaderboard headerRow {

font-size: xx-large;

font-weight: bold;

}

</ui:style>

When the view is loaded, I also run:

    @Override

    protected void onLoad() {

        super.onLoad();

        this.rankingGrid.getRowFormatter().setStyleName(0, "headerRow");

    }

where rankingGrid is my Grid object.

What I want to do is to apply the "headerRow" style to my first row (i.e. that it is displayed in big bold letters), but I can't find what I am doing wrong.

Would you have any idea?

Thanks in advance,

-- 

Sébastien Tromp

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.