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>