Applying CSS to Grid

[Sébastien Tromp]

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

[Ben Imp]

You appear to be missing a period in your CSS, in front of "headerRow".

-Ben

[Andrei]

Try

.leaderboard td:first-child {
font-size: xx-large;
font-weight: bold;
}

This should do the trick - you don't need to set a "headerRow" style
to the first row.



On Jul 27, 12:44 pm, Sébastien Tromp <sebastien.tr...@gmail.com>
wrote:

[Sébastien Tromp]

Changing the "headerRow" to ".headerRow", "tr.headerRow" or ".tr.headerRow" doesn't change anything - it is still ignored.

When I inspect the element using the development tools of Chrome, I see

<tr class="headerRow"><td><div class="gwt-Label">Skill range</div></td><td><div class="gwt-Label">Rank</div></td><td><div class="gwt-Label">Nickname</div></td></tr>

So the "headerRow" class at least is properly set, only the style application doesn't.

Applying 

                .leaderboard tr:first-child {

font-weight: bold;

}

works and solves my immediate issue, but I still do not really understand how to apply styles to the cells I want.

Thanks for your help, at least for now I can do what I wanted to :)

-- 

Sébastien Tromp

2011/7/28 Andrei <vol...@spiraluniverseinc.com>

--
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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.