This is a migrated thread and some comments may be shown as answers.

[Solved] Grid & Style Sheet Class

2 Answers 210 Views

Grid

This is a migrated thread and some comments may be shown as answers.

vn asked on 12 May 2008, 05:29 PM

Hi,

I have a grid with Skin="Web20" and one of the GridTemplateColumn has the following for ItemTemplate:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td class="LabelCell" id="tdAddressId">Address ID:</td>
        <td class="ControlCell"><%# Eval( "AddressID" ) %></td>
    </tr>
    <tr>
        <td class="LabelCell">Address Type:</td>
        <td class="ControlCell"><%# Eval( "AddressType" ) %></td>
    </tr>
</table>

Stylesheet File:

.LabelCell

{
text-align:right;
padding-right:5px;
color:#617fb5;
white-space:nowrap;
border: 0px
}

The problem that I'm having is that style (e.g. text color, border) defined the in my LabelCell style class is overridden by the style defined in the GridRow_Web20 class (RadControls\Grid\Skins\Web20\Styles.css). It looks like the RadControls\Grid\Skins\Web20\Styles.css file is loaded after my stylesheet file which override it. How can I have my style class override the style defined for the grid?

Thank you,

Vincent

2 Answers, 1 is accepted

answered on 13 May 2008, 07:54 AM

Hello Vincent,

You have observed correctly - the RadControls stylesheets are appended at the end of the <head> section, after the web application's stylesheets and that is why if a skin CSS rule and web application's CSS rule have the same specificity, the skin's CSS rule is applied.

You can easily overcome this by increasing the specificity of a given CSS rule. For example, if the RadGrid skin contains:

.GridRow_Web20 td
{
    border:1px solid red;
}

The specificity (weight) of the CSS selector is 11 (10 for the class name and 1 for the html element). If you add somewhere else this CSS rule:

.GridRow_Web20 td.LabelCell
{
     border: 2px solid blue;
}

The specificity of this CSS selector is 21 and the CSS rule will override the first one. If you are using the LabelClass also outside RadGrid, you can use :

.LabelCell,
.GridRow_Web20 td.LabelCell
{
     border: 2px solid blue;
}

You can also change the grid CSS class to a class of your own:

<table class="GridTemplate">
    <tr>
        <td class="LabelCell">Address ID:</td>
    </tr>
</table>

.Template td.LabelCell
{
     border: 2px solid blue;
}

Let us know if you need more information.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center