Bootstrap 3 align button next to dropdown list

michael1174
michael1174 used Ask the Experts™
on
I have the following code, how do I align the button on the right side of the dropdown list?
The code is in a Ajax.BeginForm with a html attribute of role = "form".  There are other columns in this row, and I want the label placed on top of the dropdownlist.

<div class="container-fluid">
 <div class="row">
 <div class='col-md-3'>
            @Html.LabelFor(m => m.HospitalID)
            @Html.HospitalComboBoxFor(m => m.HospitalID, "HospitalID", Model.RotationPhysicianID)
            @(Html.Kendo().Button().Name("addHospitalButton").Icon("plus").HtmlAttributes(new { type = "button" }))
        </div>
</div>
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Can you post your rendered code (view source - copy & paste)

Author

Commented:
<div class="container-fluid">
 <div class="row">
 <div class='col-md-3'>
            @Html.LabelFor(m => m.HospitalID)
            @Html.HospitalComboBoxFor(m => m.HospitalID, "HospitalID", Model.RotationPhysicianID)
            @(Html.Kendo().Button().Name("addHospitalButton").Icon("plus").HtmlAttributes(new { type = "button" }))
        </div>
</div>
</div>
 

Open in new window

Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
You just posted the same thing over again.  What matters in this case is the front end.  Let me guess at your rendered code http://jsbin.com/hoyok/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
 <div class="row">
   <div class="col-md-3">
     <label for="HospitalID">Hospital id</lable>
     <select id="HospitalID">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
    <button type="button" name="addHospitalButton">Refresh</button>      
   </div>
 </div>
</div>
 
</body>
</html>

Open in new window

In that format, the button is to the right.

You are mixing up bootstrap classes. <div class="container-fluid"> is from version 2 and   <div class='col-md-3'> is from version 3.

If I change the top div's class to just "container" and for fun fill in the rest of the page with a div class col-md-9, you end up with http://jsbin.com/hoyok/2/

Notice as you slide the browser narrow to wide the button wraps below the select only between the ranges of 992px and 1200px wide.  This is because you have set the width only for the "medium" sized screen and there is not enough room.

Now in this version,http://jsbin.com/hoyok/3/ I have change the class to <div class="col-xs-12 col-sm-4"> and <div class="col-xs-12 col-sm-8 col">stuff</div>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
 <div class="row">
   <div class="col-xs-12 col-sm-4">
     <label for="HospitalID">Hospital id</lable>
     <select id="HospitalID">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
    <button type="button" name="addHospitalButton">Refresh</button>      
   </div>
   <div class="col-xs-12 col-sm-8 col">stuff</div>
   
 </div>
</div>
 
</body>
</html>

Open in new window

In the extra small screen we are forcing everything to it's own row by giving it a width of the maximum 12.  Otherwise, by changing your column from a "3" to a "4" and starting it with the small, the controls will have enough space and will not wrap.

If you need more detailed help, please post a link to your sample page so we may see everything that is affecting this column. If you don't have a way to post a link to your sample, then please recreate your sample output by editing the jsbin file http://jsbin.com/hoyok/3/edit?html
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks, I tried modifying the jsbin but it wouldn't save for me.  I tried to save as template and it wouldn't update

You pointed me in the right direction, thanks... here is what I came up with:

<div class="container-fluid">
 <div class="row">
   <div class="col-md-4">
     <label for="HospitalID">Hospital id</lable>
     <div class="form-inline">
       <div class="form-group">
         <select id="HospitalID">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
       </div>
       <div class="form-group">
         <button type="button" name="addHospitalButton">Refresh</button> 
       </div>
     </div> 
   </div>
   <div class="col-md-8">stuff</div> 
 </div>
</div>

Open in new window

Author

Commented:
Thanks for the detailed response
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
In jsbin, it saves automatically.  Or you can click on the 'jsbin' top left > Create Milestone.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial