CSS Fixed Header in Gridview disappears when 'Edit' link is hovered over, causing scrolling to occur

Browser - Internet Explorer 9

Utilizing the most recent version of Microsoft's AdventureWorks2012 sandbox database (AdventureWorks2012_Data.zip) for SQL related data.

No C# page utilized behind the scenes

To start with, there are no issues with the SQL or how the SQL data in the GridView is presented (aside from the Frozen Header)

I am currently investigating why the Frozen header I have set up for a GridView embedded in a panel moves along with mouse scroll whenever the mouse hovers over the header or 'Edit' links at the beginning and end of each row.

The behaviors observed are as follows:

Scenario 1 - Mouse Hovers Over Edit Link While Scrolling - When the mouse hovers over the 'Edit' link and scrolls up or down, the frozen header moves with the mouse scroll. However, when the mouse hovers in the data area of the GridView, the header remains frozen. Hovering over the header while scrolling keeps it in place. Moving the mouse off the Frozen Header after scrolling causes the header to reappear at the top of the page or disappear completely. If the header disappears entirely, hovering the mouse over the Edit link brings the header back into view.

Scenario 2 - Mouse Hovers Over Frozen Header While Scrolling - As an attempt to resolve the issue, switching the editing links to buttons was tried to check if it solves the problem. Scrolling the GridView with the mouse hovered over the 'Edit' buttons has no effect on the header. The header stays in place and functions correctly. Scrolling with the mouse in the data area keeps the Frozen Header in the paneled GridView frozen. However, hovering over the header while scrolling maintains its position. Once the mouse is moved off the Frozen Header after scrolling, the same behavior of reappearing at the top of the page or disappearing entirely occurs.

Here's the code for Scenario 1. More code can be provided if necessary.

CSS

.header-frozen {
       font-weight: bold;
       background-color: white;
       position: relative;
       visibility: visible;
}

ASP.NET

<div >
            <asp:Panel  ID="Panel1" Height="600px" Width="9000px" ScrollBars="Vertical" runat="server">



    <asp:GridView ID="GridView1" Width="100%" Height="600px"  runat="server" AllowSorting="True" HeaderStyle-CssClass="GridViewStyle"  AutoGenerateColumns="False" DataKeyNames="BusinessEntityID" DataSourceID="SqlDataSource1"  ForeColor="#333333" GridLines="None">
    <HeaderStyle CssClass="GridViewHeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowEditButton="True" />
        <asp:BoundField HeaderStyle-CssClass="GridViewHeaderStyle"  HeaderStyle-BackColor="#507CD1" DataField="BusinessEntityID" HeaderText="Business Entity ID" ReadOnly="True" SortExpression="BusinessEntityID" InsertVisible="False" ShowHeader="False" >
<HeaderStyle BackColor="#507CD1" ForeColor="White"></HeaderStyle>
        </asp:BoundField>

        <!-- Additional BoundFields will go here -->

        <asp:CommandField ShowEditButton="True"/>
    </Columns>
  <HeaderStyle CssClass="header-frozen" Height="60px" />
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2012ConnectionString %>" SelectCommand="SELECT [BusinessEntityID],[NationalIDNumber],[LoginID],[OrganizationNode],[OrganizationLevel],[JobTitle],[BirthDate],[MaritalStatus],[Gender],[HireDate],[SalariedFlag],[VacationHours],[SickLeaveHours],[CurrentFlag],[rowguid],[ModifiedDate] FROM [HumanResources].[Employee]" UpdateCommand="UPDATE [HumanResources].[Employee] SET SELECT [NationalIDNumber] = @NationalIDNumber,[LoginID] = @LoginID,[OrganizationNode] = @OrganizationNode,[OrganizationLevel] = @OrganizationLevel,[JobTitle] = @JobTitle,[BirthDate] = @BirthDate,[MaritalStatus] = @MaritalStatus,[Gender] = @Gender,[HireDate] = @HireDate,[SalariedFlag] = @SalariedFlag,[VacationHours] = @VacationHours,[SickLeaveHours] = @SickLeaveHours,[CurrentFlag] = @CurrentFlag,[rowguid] = @rowguid,[ModifiedDate] = @ModifiedDate WHERE [BusinessEntityID] = @BusinessEntityID">
<UpdateParameters>
        <asp:Parameter Name="NationalIDNumber" />
        <asp:Parameter Name="LoginID" />
 
<!-- Additional Parameters will go here -->
         <asp:Parameter Name="BusinessEntityID" />
</UpdateParameters>

</asp:SqlDataSource>
                </asp:Panel>
    </div>

Samples of what I'm observing:

Answer №1

This answer has not been verified but may be beneficial in guiding others towards a solution.

It seems that the approach you have taken is inspired by a specific article:

The aforementioned article is also mentioned in a question on the ASP.NET forums, providing an alternative fix:

In summary, the solution appears to involve the following steps:

1) Place the GridView inside a container element (which you seem to have partially done already)

<div id="gridviewContainer" style="overflow-x: hidden; overflow: scroll; width: 100%; height:350px">
    <asp:GridView  ...>
        <HeaderStyle CssClass="header-frozen" />
    </asp:GridView>
</div>

2) Utilize CSS to define the positioning using an expression

.header-frozen{
    position: relative;
    top: expression(gridviewContainer.scrollTop-5);
}

Keep in mind that the ID of the asp:Panel created will differ from the ID in the CSS, as it is the ClientId attribute of the Panel in the Code Behind

There may be a simpler approach, such as making the container position:relative and the header either position:relative or position:absolute, eliminating the need to specify the container name in the CSS for greater reusability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Css navbar alignment

How can I center the navigation bar both horizontally and vertically? I've tried various methods but nothing seems to work. Here is my HTML: <section class="navigation" ng-controller="NavController"> <div class="nav-container"> ...

Guide on downloading jsreport in .Net using C# without opening it

I am using JS Report to generate a file and save it in the root directory. However, I want the file to be downloaded directly instead of opening for viewing. var header = await _jsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "H ...

pictures showcased in a grid that dance and sway

Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

Using TinyMCE editor to handle postbacks on an ASP.NET page

I came up with this code snippet to integrate TinyMCE (a JavaScript "richtext" editor) into an ASP page. The ASP page features a textbox named "art_content", which generates a ClientID like "ctl00_hold_selectionblock_art_content". One issue I encountered ...

The statusText property of the XMLHttpRequest object is not getting initialized

Why is the XHR request being overridden? It seems like that's what's happening here. I have a helper class that sets the status and code as shown below: if (program.Name == programName) { ServiceHelper.SetHttpError(501, "'Pr ...

Having trouble aligning modal to the left in Bootstrap 4 and MVC 5

I am currently working on a project where I am using a modal window to display an iframe. The webpage within the iframe is quite wide, so I have adjusted the width accordingly. However, the modal itself is situated in the center of the screen, causing the ...

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

Can styles be universally applied to specific elements or classes on a webpage by using hover on a single selector?

Is it possible, using only CSS and no JavaScript, to apply styles to specific elements or classes throughout an entire webpage without restrictions such as descendants or siblings, by hovering over a particular selector? For instance, I would like to remo ...

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

In what ways can a distant ancestor influence its subsequent generations down the line?

As a beginner utilizing Bootstrap v5, I am in the process of creating a navbar using the following HTML code. Within this code, the parent element (ul) of my link items contains a class called "navbar-nav" which results in my link items being styled to s ...

Having trouble sending form data through Ajax POST requests

I am encountering an issue while attempting to send form data using an Ajax call on a razor page. My problem specifically lies in creating the FormData necessary for the Ajax request. Below is the HTML code for the form: <form id="dropdownForm" asp-ac ...

How come the way the Dispose pattern functions in C# is different from the RAII approach in C++?

Recently, I came across some interesting information about the RAII pattern for non-garbage collected languages, particularly a section that stood out to me: The concept of having to explicitly implement a dispose method in custom classes in C# and Java ...

Utilizing JavaScript and the Document Object Model (DOM) to display images within a

My main goal is to have images load dynamically as the background of the browser frame, without any white spaces or repeats. I've successfully achieved this statically, but now I want to implement it so that different images are generated randomly. W ...

Ways to target other links exclusively during hover effect on a single link

I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink. .navlink { width: 100px; display:inline-block; background-color: red; } .navlink:hover~.navl ...

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

Tips on adding a third table to a JsonResult and implementing it in the Details method of my controller

My second attempt to resolve this issue has me stumped, as I cannot figure out an alternative approach. [HttpGet] public JsonResult FetchStudentBadgesList (int CohortProgramEnrollmentID) { db.Configuration.ProxyCreationEnabled = false; ...

Classes within the framework that inherently facilitate deconstruction operations

Ever since the release of .NET 4.7, it appears that Tuple and ValueTuple now natively support deconstruction without needing custom extension methods. I'm wondering if there are any other classes in the .NET framework, aside from Tuple and ValueTuple ...

Tips for smoothly transitioning elements to a visible state with a Fadein effect

I have been using a code snippet I found to fade in elements with the class "hideme" as I scroll to them. However, the elements only fade in when they are fully visible. Is there a way to modify the code so that they fade in as soon as they appear in the b ...

What is the reason for my server-side exception not resulting in a code break in Visual Studio 2010?

Running an ASP.NET project on IIS locally, and encountering an exception reported back to the web browser after a postback has been handled. In VS2010, under Debug->Exceptions..., every exception type is checked to break when thrown. Encountering this ...