ASP.net Style to freeze the header not working

Murray Brown
Murray Brown used Ask the Experts™
on
Hi

I am trying to use the following css style "HeaderFreez" on my ASP.net page below to freeze the header of my GridView
but it isn't working
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Steel._Default" %>

<!DOCTYPE html>

<style type="text/css">
.HeaderFreez
{
	position:relative ;
	top:expression(this.offsetParent.scrollTop);
	z-index: 10;
}
</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">
            <table>
                <tr>
                    <td></td>
                    <td>
                        <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
                    </td>
                    <td></td>
                    <td>
                        <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
                    </td>
                    <td></td>
                    <td></td>
                    <td>

                    </td>
                    <td>

                        &nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                    <td>
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                    <td>
                        <asp:Button ID="btnLogin" runat="server" Text="Log In" Width="120px" />
                    </td>
                    <td>

                    </td>
                    <td>

                        <asp:DropDownList ID="DropDownList_Number_Days" runat="server">
                            <asp:ListItem Value="1"></asp:ListItem>
                            <asp:ListItem Value="2"></asp:ListItem>
                            <asp:ListItem Value="5"></asp:ListItem>
                            <asp:ListItem Value="30"></asp:ListItem>
                            <asp:ListItem Selected="True" Value="365"></asp:ListItem>
                        </asp:DropDownList>

                    </td>
                    <td></td>
                    <td>
                        <asp:Label ID="lblPassword0" runat="server" ForeColor="#999999" Text="Days that you will stayed logged in for"></asp:Label>
                    </td>
                    <td></td>
                    <td>&nbsp;</td>
                </tr>

            </table>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="159px" Visible="False">
                <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="156px" Width="196px"></asp:ListBox>

                <asp:Image ID="Image1" runat="server" Height="157px" ImageUrl="~/Resources/SteelPic.jpg" Width="306px" />
                <asp:Image ID="Image2" runat="server" Height="59px" ImageUrl="~/Resources/Men_Of_Steel.jpg" Width="287px" />

            </asp:Panel>

            <asp:Panel ID="Panel3" runat="server" Visible="False">

                <asp:Label ID="lblSuccess" runat="server" ForeColor="#003300"></asp:Label>
                <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                

       <div style="width: 100%; height: 400px; overflow: scroll"> 

      <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowSorting="True">   
            <Columns>


                <asp:TemplateField HeaderText="Order" HeaderStyle-Font-Size ="Small" 
                                            ControlStyle-Font-Bold ="false" ControlStyle-Forecolor ="DarkRed" 
                                            ControlStyle-Font-Size ="Smaller">
                    <ItemTemplate>
                        <asp:Button ID="Button10" runat="server" 
                      CommandName="MyButton5" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Order" />
                    </ItemTemplate>
                          <ItemStyle HorizontalAlign="Right" />
                    <ControlStyle Font-Bold="False" Font-Size="Smaller" ForeColor="DarkBlue" />
                    <HeaderStyle Font-Size="Small" />
                </asp:TemplateField>

                
                <asp:TemplateField HeaderText="Checkout" HeaderStyle-Font-Size ="Small" 
                                            ControlStyle-Font-Bold ="false" ControlStyle-Forecolor ="DarkRed" 
                                            ControlStyle-Font-Size ="Smaller">
                    <ItemTemplate>
                        <asp:Button ID="Button11" runat="server" 
                      CommandName="MyButton6" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Check Out" />
                    </ItemTemplate>
                          <ItemStyle HorizontalAlign="Right" />
                    <ControlStyle Font-Bold="False" Font-Size="Smaller" ForeColor="DarkBlue" />
                    <HeaderStyle Font-Size="Small" />
                </asp:TemplateField>

            </Columns>

            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" CssClass="HeaderFreez"/>
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <RowStyle ForeColor="#003399" BackColor="White" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />
                   
        </asp:GridView>

        </div>

         

            </asp:Panel>
        </div>
    </form>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017

Commented:
Your question is very similar to how to freeze the header row in gridview.
In that example, the grid was wrapped in a div and the css classes applied to the div and the GridView control directly. Here is the CSS:
<style type="text/css">
        .GVFixedHeader
        {
            font-weight: bold;
            background-color: Green;
            position: relative;
            top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
        }
        .GridViewContainer
        {
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>

Open in new window

Having a look at the GridView control, wrap it in a div and apply the class to the GridView control:
<div id="GridViewContainer" class="GridViewContainer" style="width: 200px; height: 200px;">
      <asp:GridView ID="GridView2" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowSorting="True" HeaderStyle-CssClass="GVFixedHeader">
                <Columns>
                    <%-- Your Column Comes Here--%>
                    <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                </Columns>
            </asp:GridView>
        </div>

Open in new window

Murray BrownASP.net/VSTO Developer

Author

Commented:
Hi Dirk. I added a second Gridview to my page as follows but the header isn't freezing
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Steel._Default" %>

<!DOCTYPE html>

<style type="text/css">
.HeaderFreez
{
	position:relative ;
	top:expression(this.offsetParent.scrollTop);
	z-index: 10;
}
</style>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">
            <table>
                <tr>
                    <td></td>
                    <td>
                        <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
                    </td>
                    <td></td>
                    <td>
                        <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
                    </td>
                    <td></td>
                    <td></td>
                    <td>

                    </td>
                    <td>

                        &nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                    <td>
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                    </td>
                    <td></td>
                    <td>
                        <asp:Button ID="btnLogin" runat="server" Text="Log In" Width="120px" />
                    </td>
                    <td>

                    </td>
                    <td>

                        <asp:DropDownList ID="DropDownList_Number_Days" runat="server">
                            <asp:ListItem Value="1"></asp:ListItem>
                            <asp:ListItem Value="2"></asp:ListItem>
                            <asp:ListItem Value="5"></asp:ListItem>
                            <asp:ListItem Value="30"></asp:ListItem>
                            <asp:ListItem Selected="True" Value="365"></asp:ListItem>
                        </asp:DropDownList>

                    </td>
                    <td></td>
                    <td>
                        <asp:Label ID="lblPassword0" runat="server" ForeColor="#999999" Text="Days that you will stayed logged in for"></asp:Label>
                    </td>
                    <td></td>
                    <td>&nbsp;</td>
                </tr>

            </table>
            </asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="159px" Visible="False">
                <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="156px" Width="196px"></asp:ListBox>

                <asp:Image ID="Image1" runat="server" Height="157px" ImageUrl="~/Resources/SteelPic.jpg" Width="306px" />
                <asp:Image ID="Image2" runat="server" Height="59px" ImageUrl="~/Resources/Men_Of_Steel.jpg" Width="287px" />

            </asp:Panel>

            <asp:Panel ID="Panel3" runat="server" Visible="False">

                <asp:Label ID="lblSuccess" runat="server" ForeColor="#003300"></asp:Label>
                <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                

       <div style="width: 100%; height: 400px; overflow: scroll"> 

      <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowSorting="True">   
            <Columns>


                <asp:TemplateField HeaderText="Order" HeaderStyle-Font-Size ="Small" 
                                            ControlStyle-Font-Bold ="false" ControlStyle-Forecolor ="DarkRed" 
                                            ControlStyle-Font-Size ="Smaller">
                    <ItemTemplate>
                        <asp:Button ID="Button10" runat="server" 
                      CommandName="MyButton5" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Order" />
                    </ItemTemplate>
                          <ItemStyle HorizontalAlign="Right" />
                    <ControlStyle Font-Bold="False" Font-Size="Smaller" ForeColor="DarkBlue" />
                    <HeaderStyle Font-Size="Small" />
                </asp:TemplateField>

                
                <asp:TemplateField HeaderText="Checkout" HeaderStyle-Font-Size ="Small" 
                                            ControlStyle-Font-Bold ="false" ControlStyle-Forecolor ="DarkRed" 
                                            ControlStyle-Font-Size ="Smaller">
                    <ItemTemplate>
                        <asp:Button ID="Button11" runat="server" 
                      CommandName="MyButton6" 
                      CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                      Text="Check Out" />
                    </ItemTemplate>
                          <ItemStyle HorizontalAlign="Right" />
                    <ControlStyle Font-Bold="False" Font-Size="Smaller" ForeColor="DarkBlue" />
                    <HeaderStyle Font-Size="Small" />
                </asp:TemplateField>

            </Columns>

            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" CssClass="HeaderFreez"/>
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <RowStyle ForeColor="#003399" BackColor="White" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />
                   
        </asp:GridView>

        </div>

                <div id="GridViewContainer" class="GridViewContainer" style="width: 200px; height: 200px;">

                    <style type="text/css">
        .GVFixedHeader
        {
            font-weight: bold;
            background-color: Green;
            position: relative;
            top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
        }
        .GridViewContainer
        {
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>

      <asp:GridView ID="GridView2" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowSorting="True" HeaderStyle-CssClass="GVFixedHeader" >
                <Columns>
                    <%-- Your Column Comes Here--%>
                    <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                </Columns>
               <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" CssClass="GVFixedHeader"/>
            </asp:GridView>
        </div>

         

            </asp:Panel>
        </div>
    </form>
</body>
</html>

Open in new window

Senior Full Stack Developer
Distinguished Expert 2017
Commented:
What I would do is add the css to a separate file and reference that in my page. This is the proper way to do it. Then I will use Chrome Developer tools to see if there are any errors in my page. I usually debug web pages in Chrome because the developer tools really make a difference. Usuallly, errors are displayed in the Console tab. Resolve any errors displayed there first, before trying to make the css work.
Murray BrownASP.net/VSTO Developer

Author

Commented:
Thanks very much for the help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial