ASP.NET Gridview horizontal alignment in Internet Explorer

asp.net css gridview

15,969

Solution 1

Rather than using a specific CSS class tied to <th> to provide the default style for your header, you should use the HeaderStyle-CssClass property of the GridView.

.HeaderStyle {
    text-align: justify
}

<asp:GridView runat="server" ID="TestAlign" ShowFooter="True"
     DataSourceID="testDataSource" Width="600"
     HeaderStyle-CssClass="HeaderStyle">
    <Columns>
        <asp:BoundField DataField="left" HeaderText="-left-"
             HeaderStyle-CssClass="LeftAlign" />
        <asp:BoundField DataField="none" HeaderText="-none-"
             HeaderStyle-CssClass="InheritAlign" />
        <asp:BoundField DataField="right" HeaderText="-right"
             HeaderStyle-CssClass="RightAlign" />
    </Columns>
</asp:GridView>

Solution 2

whenever I define the alignment in the CSS file

.HeaderStyle th { text-align: <value>; }

It supercedes any other setting there may be.

That's because the selector .HeaderStyle th is more ‘specific’ than just .RightAlign. In CSS the more stuff you put in the selector, the more ‘specific’ it is, and more-specific rules override less-specific ones. You can see the exact rules in the spec.

If you change the .RightAlign selector to .HeaderStyle .RightAlign, it is now more specific than .HeaderStyle th and will ‘win’.

Also note inherit doesn't work in IE.

Solution 3

Solution became to do some specific BoundFields eg.

TextField : BoundField, NumberField : BoundField, DateField : BoundField

In the constructor I put a this.HeaderStyle.CssClass = "TextBoundField"; (or the CSS item governing this particular Field) Cos there is also a this.ItemStyle.CssClass = "TextBoundField";

The CSS then have a .TextBoundField { text-align: left; } (for text, right for number and dates).

Works sweet, even for IE. ;)

thx for your assistance.

15,969

Author by

Admin

Updated on June 16, 2022

Comments

Admin almost 2 years

I'm trying to have one unified location where I may edit how my gridview columns will act and align. Specifically looking at the headerrow. I have certain columns containing text values, those should be left aligned values and headers. Other columns contain integers and should be right aligned both values and headers.

"On the first day" I thought all was good and well, Firefox/Chrome showed it precisely as desired, then the users came and saw everything was wrong (in their Explorers) (center aligned headers).

Hence I spent countless hours "and sleepness nights;)" googling away trying to find the solution to no avail.

How can I uniquely identify one header cell to be left aligned and another header cell to be right aligned?

I found the HeaderStyle-CssClass and ItemStyle-CssClass (latter is not that interesting in this specific case).

Problem is whenever I define the alignment in the CSS file

.HeaderStyle th { text-align: <value>; }

It supercedes any other setting there may be. Remember text items should be left, digits right aligned, incl header.

It would be no problem persay to incl a HeaderStyle-CssClass in the troubled areas, though that would be rather bothersome to both support and maintain later. The correct solution would be a single location that would define the alignments, as they should respectively as per design. Could this be done with a skin in the themes folder?

For demonstration purposes

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewAlignments.aspx.cs"
Inherits="GridviewAlignments" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Testing GridView Alignment</title>
    <style type="text/css">
        .LeftAlign
        {
            text-align: Left;
        }
        .NoneAlign
        {
            text-align: none;
        }
        .RightAlign
        {
            text-align: Right;
        }
        .JustifyAlign
        {
            text-align: justify;
        }        
        .InheritAlign
        {
            text-align: inherit;
        }
        .HeaderStyle th
        {
            text-align: justify;
        }    
    </style>  
</head>  
<body>  
    <form runat="server">  
    <asp:GridView runat="server" ID="TestAlign" ShowFooter="True" DataSourceID="testDataSource"
        Width="600" CssClass="HeaderStyle">  
        <Columns>  
            <asp:BoundField DataField="left" HeaderText="-left-"
                HeaderStyle-CssClass="LeftAlign" />  
            <asp:BoundField DataField="none" HeaderText="-none-"
                HeaderStyle-CssClass="InheritAlign" />  
            <asp:BoundField DataField="right" HeaderText="-right"
                HeaderStyle-CssClass="RightAlign" />  
        </Columns>  
    </asp:GridView>  
    <asp:ObjectDataSource ID="testDataSource" runat="server" TypeName="TestData" SelectMethod="GetTestGridData"></asp:ObjectDataSource>  
    </form>  
</body>  
</html>