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

  • 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

    Hi

    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