Re: Applying CSS to Grid

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 <volgin@spiraluniverseinc.com>

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:

> 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.

--
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.