Styles with GridView

[tshad]

I had this in html section and found that I can't seem to override the ".tablegrid TD" even if the new style is after the TD style because it is more specific.

The only way around that would to be put it inline. But there doesn't seem to be a way to do that in the GridView.

I have a table where no matter where the class is, it is getting overwritten.

I have the following in my sheet:

.tablegrid TD {
BORDER-BOTTOM: #404040 1px solid;
TEXT-ALIGN: center;
BORDER-LEFT: #404040 1px solid;
BORDER-TOP: #404040 1px solid;
BORDER-RIGHT: #404040 1px solid;
}

This class is in my table element.

I have a particular column (td) where I want to override the TEXT_ALIGN so it is aligned left. So I created this class:

.gridCell
{
text-align: left;
padding-left: 5pt;
}

No matter where I put it in the sheet before the ".tablegrid TD" or after it, my gridcell value is still overridden by ".tablegrid TD".

When I look at it in the Developer Tools, it shows the gridCell first then the "tablegrid TD" and the text-align in the gridCell is struck out.

How do I get around that?

Thanks

Tom

 

[jbenson001]

You'd be better off posting here:
forum215

 

[tshad]

I already posted there.

And I found out about not being able to override the class ".tablegrid TD" with another class.

The only way to override it, as far as I can tell is with an inline style.

But GridView has no way to put the inline style I want on the TD.

I need it to have:

style="text-align: left; padding-left: 5pt;"

But if you look at ItemStyle (which is the TD, I believe) you can only put a few styles they define and a CSSStyle. But the CSSStyle will not override the ".tablegrid TD".

So how do I get the style I want inline on the TD?

This is an issue with asp not html.

Thanks,

Tom

 

[jbenson001]

do you need to use a gridview? Are you editing or paging etc?
If not you can use a repeater where you have total control over the outputted HTML.

What is .tablegrid TD? Is that generated by the gridview?
You can override what you need in CSS, we do it here, you just need to find where to override.
You can also override in js.

This is not an ASP issue, it's a styling issue. Basically where to set the overriding style.

 

[tshad]

Yes, this is a styling issue - controlled by asp.net and the GridView specifically. I am asking how to handle styling issues of the GridView, not styling per se. So it is an asp.net issue not an html issue.

The .tablegrid is not generated by the GridView, nor is .gridCell. They are applied to the GridView. If I asked this question of the HTML people they would rightfully say this was an asp.net issue.

<asp:GridView ID="grvEmployees" CellPadding="3" runat="server" AutoGenerateColumns="false"
Width="100%" CssClass="tablegrid" OnRowCommand="grvEmployees_RowCommand">
<HeaderStyle CssClass="tableheader" />
<RowStyle CssClass="tablerow2" />
<Columns>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:Button runat="server" ID="btnEdit" Text="Edit" CommandName="zEdit" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"
OnClientClick="showPopup()" />
</ItemTemplate>
<ItemStyle CssClass="gridCell"
</asp:TemplateField>

Here I am applying the .tablegrid to the entire grid and the .gridCell to the <td> elements.

In HTML, I can do the same thing with the same results. Apparently, I cannot override the ".tablegrid td" with another class. I can, however, override it with an inline style.

The problem is that you can't apply inline styles to the td, other than those specifically defined using the ItemStyle element.

I was asking how to get around that. I know I can use javascript, jquery or code behind to change it after the fact.

You can't override it with CSS, as far as I can see. That was what I was asking. How do I do a GridView and override the styling of the TD with CSS since I can't use inline styling.

Thanks,

Tom

 

[jbenson001]

We override it this way, maybe it will help you. If you need more mark up, let me know.
For the old datagrids and newer gridviews we assign a class to the grid:
Ex

 <asp:GridView ID="gvContent" runat="server" AutoGenerateColumns="False" [b][COLOR=#CC0000]CssClass="datagrid"[/color][/b]
                                DataKeyNames="ContentID" ShowFooter="True" GridLines="None" AllowPaging="True"
                                PageSize="20" AllowSorting="True">
              <RowStyle CssClass="item" />
              <AlternatingRowStyle CssClass="altItem" />

CSS
   .datagrid{
      styles here ...
}

   .datagrid td{
      styles here ...  
}

.item
{
   styles here ...  
}
.altItem
{
    styles here ...  
}

Hope this helps.

 

[tshad]

Actually, that is what I did in my example above.

But how do you override a specific <td> and override ".datagrid td" style - using css?

I am not sure you can without using the predefined styles <ItemStyle> element of the Template or the "ItemSyle-*" of the TemplateField element. But if it isn't predefined - you can't do it.

There is no "style" attribute for the template.

Thanks,

Tom

 

[jbenson001]

Well, all I can say is that is what we have in our CSS and it works. It is used throughout the entire site since we pull the css in our master pages.