Bootstrap 3 align button next to dropdown list

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

LVL 2
michael1174Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Scott Fell, EE MVEConnect With a Mentor DeveloperCommented:
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
0
 
Scott Fell, EE MVEDeveloperCommented:
Can you post your rendered code (view source - copy & paste)
0
 
michael1174Author 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

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
michael1174Author 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

0
 
michael1174Author Commented:
Thanks for the detailed response
0
 
Scott Fell, EE MVEDeveloperCommented:
In jsbin, it saves automatically.  Or you can click on the 'jsbin' top left > Create Milestone.
0
All Courses

From novice to tech pro — start learning today.