Geek asks and answers

ASP.NET GridView CSS issue when sorting is enabled

I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I move the style markup to the CSS sheet, and I have a strange problem when the text in the title bar does not match the correct color (it should be white, but it looks bright blue). This problem only appears when sorting is enabled.

Everything else works fine. For example, I can change the background of the title to red, and it turns red, and the rest of the grid styles are applied accordingly.

Does anyone know what a deal is? The following are snippets of code. I am also pretty new to CSS. If anyone has any tips to make my CSS code better somehow, let me know.

Thank!

Here is the ASP.NET code. I can add ForeColor = "White" to HeaderStyle and everything works fine.

<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" 
EmptyDataText="There are no data records to display." AllowSorting="True" 
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
    <Columns>
        <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" 
            SortExpression="Kingdom" />
        <asp:BoundField DataField="Phylum" HeaderText="Phylum" 
            SortExpression="Phylum" />
        <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" 
            SortExpression="GenusSpeciesStrain" />
        <asp:BoundField DataField="Family" HeaderText="Family" 
            SortExpression="Family" />
        <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" 
            SortExpression="Subfamily" />
        <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" 
            SortExpression="ElectronInput" />
        <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" 
            SortExpression="OperonLayout" />
    </Columns>
    <PagerStyle CssClass="grid-pager" />
    <SelectedRowStyle CssClass="grid-selected-row" />
    <HeaderStyle CssClass="grid-header" />
    <EditRowStyle CssClass="grid-row-edit" />
    <AlternatingRowStyle CssClass="grid-row-alternating" />

And this is the content from the stylesheet that I use:

body {
}

.grid
{
    color: #333333;
}

.grid-row
{
    background-color: #EFF3FB;
}

.grid-row-alternating
{
    background-color: White;
}

.grid-selected-row
{
    color: #333333;
    background-color: #D1DDF1;
    font-weight: bold;
}

.grid-header, .grid-footer
{
    color: White;
    background-color: #507CD1;
    font-weight: bold;
}

.grid-pager
{
    color: White;
    background-color: #2461BF;
    text-align: center;
}

.grid-row-edit
{
    background-color: #2461BF;
}
+3
source share
6 answers

I guess bright blue is very similar to the color of the hyperlink. Creating a gridview sort means that you will have a tag inside your title instead of plain text.

This should sort:

.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }
+3
source

, , , (# 507CD1) CSS:

.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }

, , ( - ):

.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }

ForeColor HeaderStyle GridView, :

<HeaderStyle CssClass="grid-header" />
+1

. :

.grid-header th a
{
    color: White;
}

"th a" AllowSorting.

+1

:

.HeaderStyle a
{
    background-color: #DE7B0A;
    color: White!important
}

, .aspx, rendered, style="color:#333333" . !important - .

, - .

+1

: # 507CD1 -. ? Visual Studio? , ?

In addition, it does not hurt to remove ForeColor = "White" from the markup. This is already in the stylesheet.

Update . I did not read the question well enough, apologized. Above is nonsense. (Or the question was changed when I was writing my answer. I don’t know)

0
source

Note that adding th in the style suggested by James in Indy, as in

.grid-header th a {color: White; }

Prevents connections in the pager section by sorting the column .

0
source

More articles:


All Articles