datagrid-header font size

[jega]

This works

<style>
    .datagrid-cell{
        font-size: 14px;
    }
    .datagrid-header .datagrid-cell{
        font-weight: bold;
        color: blue;
    }
</style>

Changing cell font size Works

<style>
    .datagrid-cell{
        font-size: 18px;
    }
    .datagrid-header .datagrid-cell{
        font-weight: bold;
        color: blue;

    }
</style>


Changing header font size doesn't Work

<style>
    .datagrid-cell{
        font-size: 18px;
    }
    .datagrid-header .datagrid-cell{
        font-weight: bold;
        color: blue;
        font-size:18px;
    }
</style>

What am i doing wrong ??

Jesper

[stworthy]

Please use this code instead.

Code:

<style>
.datagrid-header .datagrid-cell span{
    font-weight: bold;
    color: blue;
    font-size:18px;
}		
</style>

[jega]

Thanks.

But Can you Explain why font-weight and color works in .datagrid-header .datagrid-cell but font size need also span?

[iklotzko]

Jega,

Use the element inspector of your favorite browser. You will see that the header text is wrapped in a span directly under div.datagrid-cell. the div.datagrid-cell selector (in the css file) defines the color and font-weight. However, the div.datagrid-cell span selector defines the font-size. While you can certainly place the font-size in the div.datagrid-cell css, it will be overridden due to css priority definitions.

Also, it is an interesting question from a widget design perspective. Why would they do that? There are actually 2 spans inside the datagrid-cell. One of them is reserved for sorting. Right now the sorting uses a sprite image to display direction, but I guess in the future that could change and perhaps a unicode character could be used. It probably makes sense therefore to split out size. But, that is a guess, if not a reach. Not really sure why.