ASP.net Style to freeze the header not working

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

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dirk StraussSenior Full Stack DeveloperCommented:
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

0
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor 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

0
Dirk StraussSenior Full Stack DeveloperCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much for the help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.