I am building an inline form with Bootstrap 3 and I can't figure out how to keep the inputs from overlapping. I hope you can see from the screenshot that the third input is overlapping the second and the fourth in overlapping it. How can I get them to align next to each other?
Here are the main parts of the html;
<div class="form-inline">
<div class="form-group">
<input class="form-control addon-input" id="units" name="units" placeholder="units" value="30" type="text">
</div>
<div class="form-group">
<input class="string optional form-control addon-input" id="unit_price" name="unit_price" placeholder="unit price" type="text">
</div>
</div>
Related
Trying to align two form elements side by side to create an hours per week field
e.g
Hours per week (box here) - (box here)
but when I use two col-md-2 with a - between them I get the result of
Hours per week (box here) (box here) -
Anyone have a solution to display the - between the two boxes? I've tried using 3 col-md-1 but the alignment gets all out of whack!
The below code follows Bootstrap form construction. Using .input-group allows you to nest .input-group-addon between to fields with the .form-control class - though you do need to specify a width (hence the .col-xs-9).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" id="BoxOne" class="form-control">
<span class="input-group-addon">-</span>
<input type="text" id="BoxTwo" class="form-control">
</div>
</div>
</div>
</form>
Solution without the bootstrap grid
<form class="inline">
<div>
<label for="HoursPerWeek">Hours Per Week</label>
<input type="text" id="BoxOne">
<label for="#">-</label>
<input type="text" id="BoxTwo">
</div>
</form>
Solution using the bootstrap grid
<form>
<div class="form-group">
<label class="col-md-3" for="HoursPerWeek">Hours Per Week</label>
<input class="col-md-3" type="text" id="BoxOne">
<label class="col-md-3" for="#">-</label>
<input class="col-md-3" type="text" id="BoxTwo">
</div>
</form>
I have 3 columns in my form for inputting the user's phone:
<div class="col-md-5">
<label class="control-label">Phone</label>
<div class="row">
<div class="col-md-4">
<label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
<select class="form-control" name="phoneCode" id="phone_code">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<span class="col-md-2 text-center">-</span>
<div class="col-md-6">
<label for="phone_number" class="sr-only">phone number</label>
<input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
</div>
</div>
</div>
http://www.bootply.com/jgFqaA4r6o
When I include the bootstrap css for rtl:
https://github.com/morteza/bootstrap-rtl
this flips the order of the columns, which in most cases is the desired result. However, I would like the phone input columns to remain in the same order (unaltered).
Including the pull-left class to the first two columns fixes the problem but causes errors when resizing (specifically, shrinking) the screen.
I have tried using/learning the col--pull-/col--push- classes but I couldn't figure out how to make them work here.
Does anybody have any suggestions?
I am also open to changing the general layout if there are improvements on that as well.
Thank you.
I changed the html and used a small "hack" to solve this.
There is still probably a better solution out there. This is my html:
<div class="col-md-5">
<div class="col-sm-4 col-xs-12 pull-left">
<label for="phone_code" class="control-label">phone code</label>
<input type="text" class="form-control">
</div>
<div class="col-sm-8 col-xs-12">
<label for="phone_number" class="control-label">phone number</label>
<input type="tel" class="form-control">
</div>
</div>
http://www.bootply.com/tIW6xBHVGB
The "hack" is the "col-xs-12" class added to the <div> elements. If not added, the divs don't expand to take up the entire row as they should due to the "pull-left" class.
I'm open to hearing other suggestions.
I have a form and I want to keep 2 or 3 controls in line in the same row, for example:
label1
r1_ctrl1 r1_ctrl2 r1_ctrl3
label2
r2_ctrl1 r2_ctrl2 r2_ctrl3
I tried to do it this way:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>
and it does not work.
I also tried:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>
And also no result.
The only working method is Html table, but the result is really ugly. Please advise.
If you want controls on the same row you shouldn't use:
.form-horizontal
but
.form-inline
http://getbootstrap.com/css/#forms-inline
This is what .form-horizontal does:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
And this is what .form-inline does:
Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
I would take advantage of Bootstrap's flexible grid layout:
<div class="row">
<form>
<div class="col-xs-12">
<h3>Heading 1</h3>
</div>
<div class="col-xs-4 form-group">
<label for="input1">
<input id="input1" class="form-control" value="Control 1"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input2">
<input id="input2" class="form-control" value="Control 2"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input3">
<input id="input3" class="form-control" value="Control 3"></input>
</label>
</div>
</form>
</div>
Demo
Notice that I've changed your label to a heading. Each input should have its own label (with an appropriate for attribute) for accessibility. In this demo, the for attributes aren't strictly necessary as the labels wrap the inputs.
I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal form.
An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> label text
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
</div>
</div>
If a checkbox has no following text it is shifted below the row it should appear in.
Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label> that contains the <input type="checkbox"> and use the background color as the font color to hide the text.
Thank you for your help.
I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label> (currently set to inline-block) to:
label{
display:inline;
}
Here's an updated Bootply. Hope this helps! Let me know if you have any questions.
This worked for me:
<div class="form-group">
<div class="col-lg-3">
<label class="pull-right" for="MyCheckBox">My Checkbox</label>
</div>
<div class="col-lg-9">
<input type="checkbox" name="MyCheckBox">
</div>
</div>
First, I had to remove the <div class='checkbox'> element. I then made the following changes to the checkbox label element:
Place the label in its own column div <div class="col-lg-3"></div>
Remove class="control-label"
Add class="pull-right".
I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.
If you don't need following text for the checkboxes, why not just remove the <label> surrounding the checkboxes. Like so.
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="check1">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="check2">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check2">
</div>
</div>
</div>
</div>
This code appeared to work in your Bootply when I tried it.
And remember if you have a label to use the for attribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).
I am making a form with bootstrap. I understand I would need to use the form-horizontal class if I want to use horizontal labels for the entire form. However, in my case, I need a few inputs to have horizontal labels, while others have normal labels without the inline labels (with a break)
The basic code I use is the bootstrap code using the control groups as below.
<form>
<div class="control-group">
<label class="control-label">Label_name1</label>
<div class="controls">
<input type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label">Label_name2</label>
<div class="controls">
<input type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label">Label_name3</label>
<div class="controls">
<input type="text" >
</div>
</div>
</form>
What I want
Label_Name1 : [___________] (Input box inline)
Label_Name2 : [__________________________] (Input box inline)
Label_Name3:
[___________________________] (Input box on next line)
if I use the form-horizontal class
<form class = "form-horizontal">
What i get
Label_Name1 : [___________] (input box inline)
Label_Name2 : [__________________________] (Input box inline)
Label_Name3: [___________________________] (Input box inline again - not what i want)
If I do not use the form horizontal class, what i get is this
Label_Name1 :
[___________] (Input box on next line - not correct)
Label_Name2 :
[__________________________] (Input box on next line- not correct)
Label_Name3:
[___________________________] (Input box on next line)
Is there anyway I can customize the control group to set the horizontal / inline labels to each control group instead of using the form-horizontal class?
You could try something like this. Also, control-group isn't a Bootstrap class.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Label 1</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Label 2</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Label 3</label>
<div class="col-sm-12"><input type="text" class="form-control"></div>
</div>
</form>
Demo: http://bootply.com/108060