How to add drop down list server and drop down branches on same line or Rows?

Question

How to add drop down list server and drop down branches on same line or Rows?

50 views Asked by ahmed abdelaziz At 30 January 2023 at 21:37

I work on asp.net web forms . I face issue on design page print server drop down list and

branches drop down list not display on same line or rows

so How to make both drop down list on same line or rows by bootstrap or CSS.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
       <style>
        body
        {
            padding: 20px
        }
    </style>

</head>
<body>
      <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <form id="form1" runat="server">
        <div style="max-width: 400px;">
         <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
         <div class="row">
             <div class='col-md-4'>
        <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
        <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control"  AutoPostBack = "True" Width="200px" Height="32px">
        </asp:DropDownList>
                 </div>
             <div class='col-md-4'>
        <asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
        <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control"  AutoPostBack = "True" Width="200px" Height="32px">
        </asp:DropDownList>
                 </div>
       
        
             </div>
            </div>
    </form>
</body>
</html>

Expected result

align two drop down same line

last updated post

two drop down list display on same row as i need

but very closed from each other so how to leave space

img show status

Original Q&A

There are 1 answers

**Lineloop** · Accepted Answer · 2023-01-30T22:17:20+00:00

You are using Boostrap version 3.0.3, try using the latest version currently available (5.2.3), in this case it works correctly!

last updated post
To leave space between rows you can use bootstrap classes; I removed the max-width that reduced the space, now it commands the container class

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">

        <head runat="server">
            <title></title>
               <style>
                body
                {
                    padding: 20px
                }
            </style>

        <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
             <!--OLD STYLE -->
            <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />-->
            
            <!--New style-->
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

        </head>
        <body>
            
            <form id="form1" runat="server">
                <div><!--style="max-width: 400px;" is no longer needed because it is handled by container (bootstrap)-->
                 <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
                 <div class="container">
                 <div class="row">
                     <div class="col-6">
                     <p>Column 1</p>
                     <select>
                        <option value="value1">Option 1</option>
                        <option value="value2">Option 2</option>
                        <option value="value3">Option 3</option>
                     </select>

                <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
                <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control"  AutoPostBack = "True" Width="200px" Height="32px">
                </asp:DropDownList>
                         </div>
                     <div class="col-6">
                     <p>Column 2</p>
                     <select>
                        <option value="value1">Option 1</option>
                        <option value="value2">Option 2</option>
                        <option value="value3">Option 3</option>
                     </select>
                <asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
                <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control"  AutoPostBack = "True" Width="200px" Height="32px">
                </asp:DropDownList>
                         </div>
                         </div>
                         
                <asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label>
                <asp:TextBox ID="txtDate" runat="server" AutoPostBack = "True" TextMode="Date"></asp:TextBox>
                <asp:Label ID="Label3" runat="server" Text="FromTime"></asp:Label>
                <asp:TextBox ID="txtFromTime" runat="server" TextMode="Time" AutoPostBack = "True"></asp:TextBox>
                <asp:Label ID="lblToTime" runat="server" Text="ToTime" ></asp:Label>
                   
                     </div>
                     </div>
            </form>
        </body>

        <!--OLD JS-->
        <!--<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>-->

        <!--New JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        </html>

Or you can go ahead and replace one version of bootstrap at a time and check from which version everything works correctly

TechQA.

How to add drop down list server and drop down branches on same line or Rows?

There are 1 answers

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in JQUERY-UI

Related Questions in GOOGLE-WEB-DESIGNER

Related Questions in BOOTSTRAP-UI

Popular Questions

Popular Tags

Trending Questions