Make panel responsive to fit on all screen using Bootstrap in ASP.Net

Last Reply one month ago By Andrea

Posted one month ago

How can i make this more responsive to fit on all screen sizes using bootstrap

        <div class="row">
            <div class="col-xs-12">

                <asp:Panel ID="pnlSearchByComponent" CssClass="panel panel-info" runat="server">
                    <div class="panel-heading">
                        <h3 class="panel-title ">Search By Component</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-xs-6 col-md-2 col-lg-2">
                            <asp:Label ID="lblFrom" Visible="true" runat="server" Font-Bold="true" Text="From:"></asp:Label>
                            <asp:TextBox ID="txtFrom" Width="100%" placeholder="dd/MM/yyyy" runat="server" CssClass="form-control" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtFrom" ValidationGroup="1" CssClass="alert-danger" runat="server" ControlToValidate="txtFrom" ErrorMessage="Select From Date"></asp:RequiredFieldValidator>
                        </div>
                        <div class="col-xs-6 col-md-2 col-lg-2">
                            <asp:Label ID="lblTo" Visible="true" runat="server" Font-Bold="true" Text="To:"></asp:Label>
                            <asp:TextBox ID="txtTo" Width="90%" placeholder="dd/MM/yyyy" runat="server" CssClass="form-control" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtTo" ValidationGroup="1" CssClass="alert-danger" runat="server" ControlToValidate="txtTo" ErrorMessage="Select To Date"></asp:RequiredFieldValidator>
                        </div>
                        <div class="col-xs-12 col-md-2 col-lg-2">                            
                            <asp:CheckBox ID="chkOutOfSpec" Text="Out of Spec Weights Only" CssClass="Space" runat="server" />
                            <asp:RadioButtonList ID="optMetric" CssClass="Space" runat="server">
                                <asp:ListItem Selected="True"  Value="0" Text="Kilograms" ></asp:ListItem>
                                <asp:ListItem  Value="1" Text="Grams" ></asp:ListItem>
                            </asp:RadioButtonList>
                        </div>

                        <div class="col-xs-6 col-md-2 col-lg-2">
                            <asp:Label ID="lblFilterBy" Visible="true" runat="server" Font-Bold="true" Text="Filter By:"></asp:Label>
                            <asp:DropDownList ID="cmbPartFilters" AutoPostBack="True" OnSelectedIndexChanged="cmbPartFilters_SelectedIndexChanged" Width="100%" Enabled="true" CssClass="form-control pull-left" runat="server">
                                <asp:ListItem Selected="True" Value="0" Text="All Components"></asp:ListItem>
                                <asp:ListItem Value="1" Text="Specific Component" ></asp:ListItem>
                                <asp:ListItem Value="2" Text="Specific Material"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-xs-6 col-md-2 col-lg-2">

                            <asp:Label ID="lblComponents" Visible="true"  Enabled="false" runat="server" Font-Bold="true" Text="Components:"></asp:Label>
                            <asp:TextBox ID="txtComponents" Visible="true" Enabled="false" Width="100%" Placeholder="start typing here . . . . . ." runat="server" CssClass="form-control" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtComponents" ValidationGroup="1"  CssClass="alert-danger" runat="server" ControlToValidate="txtComponents" ErrorMessage="Select Component"></asp:RequiredFieldValidator>

                            <asp:Label ID="lblMaterials" Font-Bold="true" Visible="false" CssClass="pull-left" runat="server" Text="Materials:"></asp:Label>
                            <asp:TextBox ID="txtMaterials" Width="100%" Visible="false" Placeholder="start typing here . . . . . ." runat="server" CssClass="form-control" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidatortxtMaterials" ValidationGroup="1" CssClass="alert-danger" runat="server" ControlToValidate="txtMaterials" ErrorMessage="Select Material"></asp:RequiredFieldValidator>
                        </div>
                       
                        <div class="col-xs-12 col-md-2 col-lg-2">                             
                        <asp:Label ID="Label1" Visible="true"  Enabled="false" runat="server" ForeColor="White" Font-Bold="true" Text="-------------------------------------------------:"></asp:Label>
                            <asp:Button ID="btnExportToExcel"  runat="server" ValidationGroup="1" Width="150px" CausesValidation="true" OnClick="btnExportToExcel_Click" CssClass="btn btn-info pull-right" Text="Export To Excel" />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                        <asp:Button ID="btnViewResults"  runat="server" Width="100px" ValidationGroup="1"  CausesValidation="true" OnClick="btnViewResults_Click" CssClass="btn btn-info pull-left btnPad" Text="View" />                            
                        </div>
                    </div>
                </asp:Panel>
            </div>
        </div>

 

Posted one month ago
Hi @Tevin,
Please try the following

Make Table Responsive with Collapse and Expand using jQuery in Bootstrap

It might help you.

Cheers Andrea.