Overriding CSS on GridView TemplateFields

[LarrySteele]

I'm using CSS to set padding for TH and TD elements and it works as advertised. One of the attributes is padding ([tt]padding: 0 1em 0 .25em;[/tt]). This adds a touch of whitespace before and after the text. I'm happy with pretty much all my tables, gridviews, etc.

But there's one. Among other data, this one has seven columns representing days of the week. The TH's are filled with one letter for the weekday and the TD's are filled with a checkbox. In these columns, I don't want the padding around the checkbox.

I thought I could us CssClass to override the style and even tried inline style to override. No effect on either.

I've worked with a number of suggestions I found via Google, but nothing I tried worked - though I did find a couple of ways to really foul things up. I searched Tek-Tips, but didn't find anything I could use.

Here's my ASP snippet for the column I'm working with.

    <asp:TemplateField HeaderText="S">
        <ItemTemplate>
            <asp:CheckBox ID="ChkSun" runat="server" Checked='<%# Eval("sun").ToString() == "Y" ? true : false %>' />
        </ItemTemplate>
    </asp:TemplateField>

Here are a couple of methods I've tried to override the style. The text in red were two methods I tried (first setting inline style only, then setting the ItemStyle-Width only, then both).

    <asp:TemplateField HeaderText="S" [COLOR=#EF2929]ItemStyle-Width="10px"[/color]>
        <ItemTemplate>
            <asp:CheckBox ID="ChkSun" runat="server" [COLOR=#EF2929]style="padding: 0;"[/color] Checked='<%# Eval("sun").ToString() == "Y" ? true : false %>' />
        </ItemTemplate>
    </asp:TemplateField>

This isn't a question about CSS, but how to override it on specific columns in a GridView. Nevertheless, I'll post the relevant CSS here. The GridView class is the CssClass I apply on the asp:GridView object.

.GridView tr th
{
    border: 1px solid #06c;
    color: White;
    padding: 0 .25em 0 .25em;
}

.GridView tr td
{
    border: 1px solid #06c;
    color: #222;
    padding: 0 1em 0 .25em;
}

Any suggestions on how to override the CSS applied to just these columns would be appreciated.

 

[LarrySteele]

Got it! It turns out it was my CSS definitions after all. Sorry about posting a CSS issue in the ASP.NET forum. I'll post what I found in case someone else finds this useful.

I finally found the right question to answer, which led me here:

http://stackoverflow.com/questions/946645/how-to-ignore-parent-css-style.

Using the answer from that page, I modified my template field adding the green class assignments:

<asp:TemplateField HeaderText="S" [COLOR=#4E9A06]ItemStyle-CssClass="narrow" HeaderStyle-CssClass="narrow"[/color]>
     <ItemTemplate>
         <asp:CheckBox ID="ChkSun" runat="server" style="padding: 0;" Checked='<%# Eval("sun").ToString() == "Y" ? true : false %>' />
     </ItemTemplate>
</asp:TemplateField>

Then I added the two new class style assignments:

.GridView tr th.narrow
{
    border: 1px solid #06c;
    color: White;
    padding: 0;    
}

.GridView tr td.narrow
{
    border: 1px solid #06c;
    color: #222;
    padding: 0;
}

Now my .narrow subclass is applied to specific columns as desired.

 

[jbenson001]

Cool. Glad you found it and posted. This may help someone in the future.