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).
Related
I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.
CSS to apply style to specific elements of specific div:
html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
height: 42px;
}
HTML Code:
<div class="asd removeFocus">
<div class="forms_in_ap removeFocus">
<label for="email">Email address</label>
<div class="removeFocus">
<input type="text" id="email" name="email" class="required error ">
<span id="email-error" class="error">Please enter a Valid Email Address.</span>
</div>
</div>
<div class="forms_in_ap removeFocus">
<label for="reEmail">Re-enter email address</label>
<div class="removeFocus">
<input type="text" id="reEmail" name="reEmail" maxlength="64">
</div>
</div>
</div>
<div class="form">
<div class="forms_in_ap">
<label for="nogInFirstName">First Name</label>
<div>
<input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInLastName">Last Named</label>
<div>
<input type="text" name="txtLName" maxlength="15" id="nogInLastName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInAccNumber">Coupon Number</label>
<div>
<input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
</div>
</div>
<div class=" forms_in_ap">
<div class="ccvDiv">
<label for="cvv"> pin</label>
<div>
<input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
</div>
</div>
</div>
</div>
The above CSS works fine but not sure whether this is a correct, standard or optimize code please suggest me.
Since you have each specific input with an HTML ID, there is no need for you to specify the parent class.
This should work for you, it's cleaner and simpler:
input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
height: 42px;
}
The most important thing to remember here is that IDs are unique. You can't have two elements with the same ID, so adding the parent element when styling is not necessary.
Note about the "input": Since the IDs are unique, there's no need to have the "input" before the ID, but it can be seen as good practice for elements such as inputs to have the selector prior to the class/id, making it clearer what you're styling.
However, this doesn't apply to things like divs, since almost everything on the web is a div, adding it before a class/id is just overkill.
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.
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
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
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>