Remove From My Forums

How to have a horizontal scrollbar when gridview overflows my page width?

Question

User1857760563 posted

I have a template at work to use when developing webpages and I believe the template is overriding the horizontal scroll feature?

When I create the gridview in a stand alone project without a template there is a translucent scroll bar when the gridview overflows the page, but when I create it in this template there is no scrollbar.

I can't find out where it's being limited and I'm looking for help/ideas on how to override the template setting or work around it? Below is the gridview code.

<asp:GridView ID="grdvwOutput" runat="server" AutoGenerateEditButton="true" EmptyDataText="No results found, query with different data" BackColor="#DEBA84" BorderColor="#DEBA84" 
             OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound" 
             OnRowCancelingEdit="GridView1_RowCancelingEdit" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" 
             AllowSorting="True" AutoGenerateColumns="false" >
            <Columns>
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneTrackingID" SortExpression="xxxxxxx" ReadOnly="true" ConvertEmptyStringToNull="false" />
                <asp:BoundField DataField="dateTime" HeaderText="dateTime" ReadOnly="True" SortExpression="dateTime" />
                <asp:BoundField DataField="domain" HeaderText="domain" ReadOnly="True" SortExpression="domain" />
                <asp:BoundField DataField="xxxxxxx" HeaderText="pin" HtmlEncode="False" SortExpression="pin" /> 
                <asp:BoundField DataField="nameAssigned" HeaderText="nameAssigned" SortExpression="nameAssigned" />
                <asp:BoundField DataField="emailAddress" HeaderText="emailAddress" ReadOnly="True" SortExpression="emailAddress" />
                <asp:BoundField DataField="nameAd" HeaderText="nameAd" ReadOnly="True" SortExpression="nameAd" />            
                <asp:TemplateField HeaderText="positionTitle" SortExpression="positionTitle">
                    <ItemTemplate>
                        <asp:Label ID="lblPositionTitle" runat="server" Text='<%# Bind("positionTitle") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlPositionTitle" runat="server" DataSourceID="SqlDataSourcePositionTitles" DataTextField="title"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:TemplateField HeaderText="positionNumber" SortExpression="positionNumber">
                    <ItemTemplate>
                        <asp:Label ID="lblPositionNumber" runat="server" Text='<%# Bind("positionNumber") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlPositionNumber" runat="server" DataSourceID="SqlDataSourcePositionNumbers" DataTextField="position"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:TemplateField HeaderText="component" SortExpression="component">
                    <ItemTemplate>
                        <asp:Label ID="lblComponent" runat="server" Text='<%# Bind("component") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlComponent" runat="server" DataSourceID="SqlDataSourceComponents" DataTextField="component"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneStartDate" ReadOnly="True" SortExpression="xxxxxxx" />
                <asp:BoundField DataField="inPlaceHoldName" DataFormatString="{0:C}" HeaderText="inPlaceHoldName" HtmlEncode="False" SortExpression="inPlaceHoldName" />
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneEndDate" SortExpression="xxxxxxx" />
                <asp:TemplateField HeaderText="mailboxType" SortExpression="mailboxType">
                    <ItemTemplate>
                        <asp:Label ID="lblMailboxType" runat="server" Text='<%# Bind("mailboxType") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlMailboxType" runat="server" DataSourceID="SqlDataSourceMailboxTypes" DataTextField="mailbox"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="recordCreator" HeaderText="recordCreator" ReadOnly="True" SortExpression="recordCreator" />
                <asp:BoundField DataField="recordCreationDateTime" DataFormatString="{0:C}" HeaderText="recordCreationDateTime" ReadOnly="True" HtmlEncode="False" SortExpression="recordCreationDateTime" />
                <asp:BoundField DataField="additionalNotes" HeaderText="additionalNotes" SortExpression="additionalNotes" />
                <asp:BoundField DataField="recordUpdates" HeaderText="recordUpdates" ReadOnly="True" SortExpression="recordUpdates" />
            </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FFF1D4" />
            <SortedAscendingHeaderStyle BackColor="#B95C30" />
            <SortedDescendingCellStyle BackColor="#F1E5CE" />
            <SortedDescendingHeaderStyle BackColor="#93451F" />
        </asp:GridView>

Friday, July 20, 2018 1:19 PM

All replies

User-369506445 posted

Try wrapping a <div style="overflow-x:auto;width:800px"></div> around the GridView.

<div style="overflow-x:auto;width:800px">

<asp:GridView ID="grdvwOutput" runat="server" AutoGenerateEditButton="true" EmptyDataText="No results found, query with different data" BackColor="#DEBA84" BorderColor="#DEBA84" 
             OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound" 
             OnRowCancelingEdit="GridView1_RowCancelingEdit" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" 
             AllowSorting="True" AutoGenerateColumns="false" >
            <Columns>
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneTrackingID" SortExpression="xxxxxxx" ReadOnly="true" ConvertEmptyStringToNull="false" />
                <asp:BoundField DataField="dateTime" HeaderText="dateTime" ReadOnly="True" SortExpression="dateTime" />
                <asp:BoundField DataField="domain" HeaderText="domain" ReadOnly="True" SortExpression="domain" />
                <asp:BoundField DataField="xxxxxxx" HeaderText="pin" HtmlEncode="False" SortExpression="pin" /> 
                <asp:BoundField DataField="nameAssigned" HeaderText="nameAssigned" SortExpression="nameAssigned" />
                <asp:BoundField DataField="emailAddress" HeaderText="emailAddress" ReadOnly="True" SortExpression="emailAddress" />
                <asp:BoundField DataField="nameAd" HeaderText="nameAd" ReadOnly="True" SortExpression="nameAd" />            
                <asp:TemplateField HeaderText="positionTitle" SortExpression="positionTitle">
                    <ItemTemplate>
                        <asp:Label ID="lblPositionTitle" runat="server" Text='<%# Bind("positionTitle") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlPositionTitle" runat="server" DataSourceID="SqlDataSourcePositionTitles" DataTextField="title"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:TemplateField HeaderText="positionNumber" SortExpression="positionNumber">
                    <ItemTemplate>
                        <asp:Label ID="lblPositionNumber" runat="server" Text='<%# Bind("positionNumber") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlPositionNumber" runat="server" DataSourceID="SqlDataSourcePositionNumbers" DataTextField="position"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:TemplateField HeaderText="component" SortExpression="component">
                    <ItemTemplate>
                        <asp:Label ID="lblComponent" runat="server" Text='<%# Bind("component") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlComponent" runat="server" DataSourceID="SqlDataSourceComponents" DataTextField="component"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneStartDate" ReadOnly="True" SortExpression="xxxxxxx" />
                <asp:BoundField DataField="inPlaceHoldName" DataFormatString="{0:C}" HeaderText="inPlaceHoldName" HtmlEncode="False" SortExpression="inPlaceHoldName" />
                <asp:BoundField DataField="xxxxxxx" HeaderText="capstoneEndDate" SortExpression="xxxxxxx" />
                <asp:TemplateField HeaderText="mailboxType" SortExpression="mailboxType">
                    <ItemTemplate>
                        <asp:Label ID="lblMailboxType" runat="server" Text='<%# Bind("mailboxType") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlMailboxType" runat="server" DataSourceID="SqlDataSourceMailboxTypes" DataTextField="mailbox"></asp:DropDownList>
                    </EditItemTemplate>                
                </asp:TemplateField>
                <asp:BoundField DataField="recordCreator" HeaderText="recordCreator" ReadOnly="True" SortExpression="recordCreator" />
                <asp:BoundField DataField="recordCreationDateTime" DataFormatString="{0:C}" HeaderText="recordCreationDateTime" ReadOnly="True" HtmlEncode="False" SortExpression="recordCreationDateTime" />
                <asp:BoundField DataField="additionalNotes" HeaderText="additionalNotes" SortExpression="additionalNotes" />
                <asp:BoundField DataField="recordUpdates" HeaderText="recordUpdates" ReadOnly="True" SortExpression="recordUpdates" />
            </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FFF1D4" />
            <SortedAscendingHeaderStyle BackColor="#B95C30" />
            <SortedDescendingCellStyle BackColor="#F1E5CE" />
            <SortedDescendingHeaderStyle BackColor="#93451F" />
        </asp:GridView>
</div>

result

Friday, July 20, 2018 2:30 PM

Asked by:

How to have a horizontal scrollbar when gridview overflows my page width?

Question

All replies