Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I have tried various CSS classes after placing the grid inside a div element, but they end up locking both the header horizontally and vertically. I need assistance in fixing the headers only for vertical scrolling.

This is a part of my aspx page:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
                                <div runat="server" id="GridViewDiv" style="overflow:auto" >
                                <asp:HiddenField ID="BindOnPostBack" Value="1" runat="server" /> 
                                    <asp:GridView Width="100%" ID="ProjectsGridView" runat="server" AutoGenerateColumns="false"
                                        OnRowCreated="BudgetGridView_RowCreated"  OnRowDataBound="BudgetGridView_RowDataBound" PagerSettings-Visible="true" PageSize="20"
                                        AllowPaging="true" AllowSorting="true" RowStyle-BackColor="#E8EAF7" RowStyle-BorderColor="White"
                                        RowStyle-Height="19px" RowStyle-Font-Size="11px" RowStyle-HorizontalAlign="Left"
                                        RowStyle-VerticalAlign="Middle" RowStyle-Font-Names="Tahoma,Helvetica,Arial"
                                        HeaderStyle-BackColor="#d1d5ef" HeaderStyle-Height="22px" HeaderStyle-HorizontalAlign="Left"
                                        HeaderStyle-Font-Names="Tahoma,Helvetica,Arial" HeaderStyle-Font-Size="13px"
                                        HeaderStyle-Wrap="false" HeaderStyle-Font-Underline="false" RowStyle-Wrap="false"
                                        PagerSettings-Position="Top" DataKeyNames="ID">


and here is my css code:
div#GridViewDiv { 
width: expression(document.getElementById("ctl00_contentPanel").style.width); 
height: expression(document.getElementById("contentdiv").style.width);
overflow: scroll; 
position: relative; 
}

div#GridViewDiv th {   
top: expression(document.getElementById("GridViewDiv").scrollTop - 2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 50;
} 

td.locked, th.locked {
position:relative;    
left:expression((this.parentElement.parentElement.parentElement.parentElement.scrollLeft-2)+'px');
}

Answer №1

By using the position:fixed; property, you can ensure that the element remains in a fixed position regardless of the browser being used.

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

What is the best way to display the content below a bootstrap card while utilizing relative positioning?

Currently working on a bootstrap card design featuring an image. With the card body positioned above the image using position: absolute and top. The challenge arises when adding a new div below the card; it ends up being pushed onto the image instead of s ...

Can an action be activated when the mouse comes to a halt?

Currently, I am having trouble triggering an event when a user stops moving their mouse over a div element. The current event is set up to show and follow another element along with the mouse movement, but I want it to only display when the mouse stops mov ...

Extract file data from FormData array and send it to the Controller for storage in a PostgreSQL database

Greetings, We have a MVC backend - How should the solution be designed for this problem? The front end sends an array of files like this: FormData:[ file0: (binary) file1: (binary) file2: (binary) ] On the back end, there is a Controller: C ...

Grouping results by month according to the datetime object in C#

I am working on an ASP.NET MVC application that includes a line chart displaying record counts and months on the X-axis and Y-axis respectively. To achieve this, I need to make an ajax call to the controller where the model holds information such as the r ...

Querying SQL rows in C# using asynchronous Tasks

With a table containing approximately 3 million rows, my goal is to efficiently process these records using TPL. I have a console application that retrieves all the rows and processes them. My intention is to fetch 1000 rows at a time and execute the proce ...

Compare the current row of a Gridview with the row that came before it

I am attempting to customize the appearance of a gridview by comparing the value in the current row (column 2) with the previous row's value. The goal is to change the background color to green if they match, and red if they do not. Here is an example ...

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: https://i.sstatic.net/LUgGW.png The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ &l ...

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

In my current next.js project, I recently created a file named [collectionId].jsx within the pages directory. Interestingly, I noticed that Tailwind CSS does not seem to work properly with this file. However, when I renamed the file to [collectionId].js wi ...

Is there a way to place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC). <div id="remoteVideoContainer"> <video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true" height="500" width="100%"> ...

Can you have two onclick events triggered by a single Div? (ASP.NET / HTML)

I am currently working with Div's and facing a challenge of handling 2 events with just one Div-Click.. I wanted to use both onclick="" and OnClientClick, but it seems that when using a Div, I cannot make use of OnClientClick. Can anyone provide me ...

Enhance text content effortlessly with an automated text augmentation feature

Essentially, what I'm wondering is whether there exists a program that can automatically add HTML tags to the text you input. For instance: Let's say I type in: "The world is beautiful" The program would then transform it into: <p align="c ...

How can you give a custom icon to the 'startIcon' of a MaterialUI button?

Below is the current code I am using: import { Button, Grid, Typography, } from '@material-ui/core'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; <Grid item> <Button variant="outlined" ...

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

Enhance the CSS Transition for a Seamless Bootstrap Toggle Menu Experience

I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here: After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one: .collaps ...

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

Begin one lesson, end all others

Looking for help with my expandable list menu that I created using jQuery. Here is the code snippet: $("#menu ul li ul").hide(); $("#menu ul li").click(function() { $(this).find("ul").slideToggle(); }); You can view the fully functional menu on jsFi ...

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...