Solved

Bootstrap 3 align button next to dropdown list

Posted on 2014-03-02
7
2,450 Views
Last Modified: 2014-03-10
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

0
Comment
Question by:michael1174
  • 3
  • 3
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39898682
Can you post your rendered code (view source - copy & paste)
0
 
LVL 2

Author Comment

by:michael1174
ID: 39898686
<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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39899132
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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 
LVL 2

Author Comment

by:michael1174
ID: 39916955
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
 
LVL 2

Author Closing Comment

by:michael1174
ID: 39916956
Thanks for the detailed response
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39917318
In jsbin, it saves automatically.  Or you can click on the 'jsbin' top left > Create Milestone.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question