locked
Making gridview responsive inside parent div tag RRS feed

  • Question

  • User-1994446809 posted

    Hello forum,

    I have been trying to make my gridview responsive in its parent <div> tag but it seems that when I minimize the window, part of the gridview skips out of the parent div and this causes my footer to appear shot in width in a smaller window.

    Here is a screenshot of what I mean

    Gridview skipped

    I also did a very short video clip on this. HERE IS THE VIDEO CLIP

    https://youtu.be/5zPFjn1yPm0

    This is my HTML and CSS for the parent div and gridview:

    HTML

                            <div class="parent">
                                <div class="child" id="midcont" style="width: 100%;">
                                    <div class="heading">
                                        <asp:Label ID="Label4" runat="server" Text="COMPANY"></asp:Label>
                                    </div>
                                    <div>
                                       <br />
                                        <header>
                                            <div class="company-address">
                                                <asp:Label ID="Label2" runat="server" Text="Company Name:"></asp:Label>
                                                <asp:TextBox ID="TextBox4" runat="server" Height="60px" TextMode="MultiLine" Width="265px"></asp:TextBox>
                                            </div>
                                            <div class="invoice-details">
                                                <asp:Label ID="Labelinvoice" runat="server" Text="Invoice N°: 6541"></asp:Label><br /><br />
                                                 <asp:TextBox ID="TextBox5" runat="server" Width="198px" type="date" BorderStyle="Solid" BorderWidth="1"></asp:TextBox>
                                            </div>
                                        <div class="customer-address">
                                            <asp:Label ID="Label3" runat="server" Text="TO:"></asp:Label>
                                            <asp:TextBox ID="TextBox6" runat="server"  Height="60px" TextMode="MultiLine" Width="265px"></asp:TextBox> 
                                        </div>
                                        </header>
                                    </div>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <hr />
             
                                    <asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False" OnRowCreated="Gridview1_RowCreated"
                                                class="table table-striped table-condensed table-bordered" HeaderStyle-ForeColor="White" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="Black">
                                                <Columns>
                                                    <asp:TemplateField HeaderText="Item Decription" ItemStyle-Width="450">
                                                        <ItemTemplate>
                                                            <asp:TextBox ID="textBox1" runat="server" Width="450" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
                                                            <script type="text/javascript">
                                                                function Resize(textbox) {
                                                                    textbox.style.height = "";
                                                                    textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
                                                                }
                                                            </script>
                                                        </ItemTemplate>
                                                        <FooterStyle HorizontalAlign="Left" />
                                                        <FooterTemplate>
                                                            <asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Font-Size="Small" Text="+ Item" OnClick="ButtonAdd_Click" />
                                                        </FooterTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="100">
                                                        <ItemTemplate>
                                                            <asp:TextBox Class="form-control" ID="TextBox2" Height="25" Font-Size="Small" runat="server" Width="100"></asp:TextBox>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="Rate" ItemStyle-Width="180">
                                                        <ItemTemplate>
                                                            <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                            <asp:TextBox ID="TextBox3" Height="25" runat="server" Width="120"></asp:TextBox>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="Amount" ItemStyle-Width="150">
                                                        <ItemTemplate>
                                                            <span class="currency-symbol" style="font-weight: bolder">NGN</span>
                                                            <asp:Label ID="Label1" runat="server" Text="0" Font-Bold="True"></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Remove</asp:LinkButton>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <HeaderStyle Height="10px" />
                                            </asp:GridView>
                                            <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Font-Size="Small" BackColor="SteelBlue" Text="Save and Send to Mail" OnClick="Button1_Click" />
                                </div>
                            </div>

    CSS

     <style type="text/css" media="screen">
            .parent {
                margin-left: auto;
                margin-right: auto;
                padding: 10px;
                display: flex;
                background-color: #ffffff;
                border: 1px solid #ccc;
            }
            .child {
                width: 100%;
                height: auto;
                padding: .5rem;
            }
            .container {
                width: 100%;
                padding: .5rem;
                margin: 0px;
            }
            .company-address {
                border: 0px solid #ccc;
                float: left;
                width: 200pt;
                font-size:smaller;
            }
            .invoice-details {
                border: 0px solid #ccc;
                float: right;
                width: 200px;
                margin-right: 10px;
            }
            .customer-address {
                border: 0px solid #ccc;
                float: left;
                margin-top: 100px;
                width: 200px;
                font-size:smaller;
            }
            .heading {
                font-size:larger;
                font-weight:bolder;
                ;
            }
        </style>

    Tuesday, September 8, 2020 9:29 AM

Answers

  • User475983607 posted

    I have been trying to make my gridview responsive in its parent <div> tag but it seems that when I minimize the window, part of the gridview skips out of the parent div and this causes my footer to appear shot in width in a smaller window.

    First try setting the GridView width to 100% or 90%.

    I think it is important to understand that the ASP.NET GridView existed well before responsive websites.  You might have to tweak the GridView CSS.  I recommend a basic internet search to find how other developers solved this problem.  Secondly, i noticed you are using Bootstrap but the outer div uses custom CSS.  Why not use Bootstrap all the way and search for an ASP.NET GridView Bootstrap solution.

    Lastly, use the browser's dev tools to debug your  CSS.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 8, 2020 11:23 AM