Horizontal scroll bar not visible -ASP.Net

Question

I have enclosed Gridview with DIV to enable scroll bars, vertical scroll bar is working fine but not the horizontal scroll bar, because of that gridview columns become cluttered. I tried setting the width for gridview columns but no avail. Please help in setting the horizontal scroll bar. I am new to programming.

<div style="width: 100%; height: 400px; overflow-x: auto" runat="server">

    <asp:GridView ID="GridView1" runat="server" DataKeyNames="id" AutoGenerateColumns = "false"
    AllowPaging = "true" PageSize = "10"  Font-Names = "Arial" 
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "white"  
    HeaderStyle-BackColor = "#007acc"  OnPageIndexChanging = "OnPaging"
    OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting">

 <Columns>
    <asp:CommandField HeaderText="Update" ShowSelectButton="True" ButtonType="Image" SelectImageUrl="~/Images/edit.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">  
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Images/delete.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:BoundField ItemStyle-Width="10px" DataField="id" HeaderText="ID" 
    ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
    InsertVisible="False" ReadOnly="True" NullDisplayText="&quot;&quot;">
    <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" Width="10px"></ItemStyle> </asp:BoundField>

     <asp:BoundField DataField="PurchasedOn" HeaderText="Valid From" 
     ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
     <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
     <ItemStyle HorizontalAlign="Left" Width="130px"></ItemStyle>
     </asp:BoundField>

    </Columns>
    </asp:GridView>
        </div>

Joel Dharansingh Joel Dharansingh · Accepted Answer · 2020-03-11T06:29:35

Try this below block of code.

<div style="width: 100%; height: 400px; overflow-x: auto" runat="server">

    <asp:GridView ID="GridView1" runat="server" DataKeyNames="id" AutoGenerateColumns = "false"
    AllowPaging = "true" PageSize = "10"  Font-Names = "Arial" 
    Font-Size = "11pt" AlternatingRowStyle-BackColor = "white"  
    HeaderStyle-BackColor = "#007acc"  OnPageIndexChanging = "OnPaging"
    OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting"  width="100%" style="overflow-x:auto;"> **//Horizontal scroll overflow:auto --> both v & H scroll , overflow-y:auto for V //scroll.**


 <Columns>
    <asp:CommandField HeaderText="Update" ShowSelectButton="True" ButtonType="Image" SelectImageUrl="~/Images/edit.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">  
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Images/delete.gif" ControlStyle-Width="25px" ControlStyle-Height="20px">
    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
    <ItemStyle HorizontalAlign="Center" Width="40px"></ItemStyle>
    </asp:CommandField>

    <asp:BoundField ItemStyle-Width="10px" DataField="id" HeaderText="ID" 
    ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left"
    InsertVisible="False" ReadOnly="True" NullDisplayText="&quot;&quot;">
    <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
    <ItemStyle HorizontalAlign="Left" Width="10px"></ItemStyle> </asp:BoundField>

     <asp:BoundField DataField="PurchasedOn" HeaderText="Valid From" 
     ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
     <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
     <ItemStyle HorizontalAlign="Left" Width="130px"></ItemStyle>
     </asp:BoundField>

    </Columns>
    </asp:GridView>
        </div>

Horizontal scroll bar not visible -ASP.Net

1 Answers