Solved

Bootstrap 3 align button next to dropdown list

Posted on 2014-03-02
7
2,363 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
Comment Utility
Can you post your rendered code (view source - copy & paste)
0
 
LVL 2

Author Comment

by:michael1174
Comment Utility
<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
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 2

Author Comment

by:michael1174
Comment Utility
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
Comment Utility
Thanks for the detailed response
0
 
LVL 52

Expert Comment

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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now