Fixed Header in GridView Causes Container Overflow

I have a gridview with a frozen header in a Div container. It works perfectly when the number of header columns in the gridview does not exceed the container's width, but if I add more header columns, it overflows the div container.

https://i.sstatic.net/TwKfG.jpg

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
       .header { position:absolute;  }
   </style>
</head>
<body>
    <form id="form1" runat="server">
   <div style="overflow:scroll; height:250px; width:600px;" >
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
               CellPadding="4" ForeColor="#333333" Width="600px">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="271px" />
                <asp:BoundField DataField="Branch" HeaderText="Branch" HeaderStyle-Width="91px" />
                <asp:BoundField DataField="City" HeaderText="City" HeaderStyle-Width="194px" />
                 <asp:BoundField DataField="Contact" HeaderText="NewColumn1" HeaderStyle-Width="194px" />
                 <asp:BoundField DataField="Email" HeaderText="NewColumn2" HeaderStyle-Width="194px" />
            </Columns> 
            <HeaderStyle CssClass="header" BackColor="#7961da"
                                                                Font-Bold="True" ForeColor="White" />       
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
         </asp:GridView>
    </div>
    </form>
</body>
</html>

/Aspx.cs Code/

 protected void Page_Load(object sender, EventArgs e)
{




    DataTable table = new DataTable();
    table.Columns.Add("Name");
    table.Columns.Add("Branch");
    table.Columns.Add("City");
    table.Columns.Add("Contact");
    table.Columns.Add("Email");

    for (int i = 0; i < 80; i++)
    {
        DataRow row1 = table.NewRow();
        List<string> report1 = new List<string>();
        report1.Add("XYZ");
        report1.Add("ABC");
        report1.Add("PQR");
        row1["Name"] = "MyName";
        row1["Branch"] = "MyBrach";
        row1["City"] = "London";
        row1["Contact"] = "NewColumnData1";
        row1["Email"] = "NewColumnData2";


        table.Rows.Add(row1);
    }



    GridView1.DataSource = table;
    GridView1.DataBind();

Answer №1

To eliminate the unwanted overlapping effect, simply delete all instances of HeaderStyle-Width="x".

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

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

Having trouble populating a datalist with options sourced from a MySQL table, as the options do not consistently show up (Node.js)

My goal is to dynamically populate a datalist with option elements by querying a MySQL server using node. The requirement is that if the inputted text by the user matches any part of a university name in the database, that university should be displayed as ...

What methods can be used to restrict the user from typing at the very end of a scrollable textarea?

Hello there, I hope everything is going well for you! I'm currently working on a project with a basic code editor and trying to find the best way to add some space at the bottom of the textarea. I don't want users to always be typing right at th ...

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

I'm dealing with a challenge on my assignment. I've been tasked with creating a Shopping Cart using Javascript, HTML5, and JQuery. It needs to collect all the items from the shop inside an Array. While I believe I have most of it figured out, I a ...

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

The image data is not displaying in the $_FILES variable

I am having an issue updating an image in my database. I have a modal that loads using jQuery. When I click on the save modification button, all the form data appears except for the image file, which does not show up in the $_FILES array in PHP. I have tri ...

Tips on successfully transferring a JavaScript variable from PHP to JavaScript

I am struggling with how to manipulate a JavaScript variable in my HTML script and then pass it to a PHP file for incrementing by 1. However, I am unsure of how to return this modified variable back to the HTML file for display. Additionally, I am uncertai ...

The function $scope.$watch(var,function) was not defined and caused an error stating that

Having trouble with the error message: "undefined is not a function" popping up when attempting to add a watch to the scope. I've been staring at this code for so long now, but still unable to locate the source of the issue. Why am I getting an undef ...

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

Ensure the first column is fixed and all other columns have the same height

I have encountered an issue where the first column of my table has varying heights compared to the other columns, resulting in inconsistent row heights. Below is the code I am using: <div class="outer"> <div class="inner"> <table> ...

convert emails into web pages for easy viewing

When creating an email, ensuring it displays properly in all email programs can be a challenge. One way to address this issue is by including a "Email not displaying correctly? View online" link. One option could be to save a copy of the email on a server ...

Issues Arising from Use of '+' Character in Encoded Token Strings within ASP.NET Core and Angular Application

I'm facing a challenge with handling URL-encoded strings in my ASP.NET 8 Core and Angular 17 application, particularly when dealing with password reset functionality. The issue stems from the presence of the '+' character in the URL-encoded ...

Practicing the basics of a simple 3-column layout before delving into the world of

Currently, I am working on a three column layout that appears to be functioning well on the surface. However, upon inspecting the page using developer tools, it becomes apparent that the margin of the third middle column is overlapping with the neighboring ...

I am attempting to showcase a retrieved value in HTML through an AJAX request, with the help of Flask

Hello everyone, I'm fairly new to web development and currently working on a flask application. My goal right now is to test an AJAX function to ensure it's functioning correctly. This function reads radio inputs from HTML, and my aim is to displ ...

Importing JSON data into a WPF ListBox

Exploring WPF for the first time and enjoying it, but encountering an issue. I have successfully set up a class to save and load root names and child information in JSON format. I am trying to load the JSON nickname items into a listbox when the program st ...

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

Sharing the ASP MVC 5 code-first EF project with its corresponding local database

Currently, I am working on an ASP MVC 5 application that utilizes Code First EF. I am in the process of setting up a remote debugging environment and I am following the steps outlined here. While the website itself is publishing successfully, I am facing ...