csstwitter-bootstrapjquery-uigoogle-web-designerbootstrap-ui

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

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

Solution

  • 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/bootstrap@5.2.3/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/bootstrap@5.2.3/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