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" />
Related
do you know how is it possibile that when you enter to an input, JAWS first read content of previous field?
Is it possible to fix it or it depends on browser you use?
This is my code:
<!-- Presso -->
<div class="{!IF(presso, 'slds-show', 'slds-hide')}" style="margin-bottom: 8px">
<div class="slds-form-element slds-size--1-of-1">
<label class="slds-form-element__label">Presso</label>
<div class="slds-form-element__control">
<input id="pressoInput" class="slds-input" type="text" />
</div>
</div>
</div>
<!-- Region -->
<div class="slds-form-element">
<label class="slds-form-element__label">
Region
</label>
<div class="slds-form-element__control">
<input id="regionInput" class="slds-input" type="text" disabled="disabled"/>
</div>
</div>
I see two things. The first is your second <input> is disabled so I'm a little curious how you are getting your focus onto the second input. You're not using tab because the browser won't let you do that. Are you using the down arrow in JAWS to navigate through the DOM?
Second, you have <label> elements but you are not associating the labels with the <input> fields. Just because the <label> is next to the <input> in the DOM does not mean the screen reader will read the label when focus moves to the input. You have to tie them together. This is done with the for attribute of the <label>. The value of for should be the ID (not the NAME) property of the <input> as follows:
<label class="slds-form-element__label" for="pressoInput">Presso</label>
<div class="slds-form-element__control">
<input id="pressoInput" class="slds-input" type="text" />
</div>
...
<label class="slds-form-element__label" for="regionInput">Region</label>
<div class="slds-form-element__control">
<input id="regionInput" class="slds-input" type="text" disabled="disabled" />
</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
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.
If you have access to the HTML you can simply add a new class to the divs that contain the input fields and that need to be modified. For example "modify-this", then style that class accordingly.
If your HTML is dynamic and might change, or if you can't modify the HTML directly for some reason, the second easiest way to achieve this is using some jQuery to add a class to the elements you want to modify, you can achieve this by using the .parent() function, like so:
$(document).ready(function () {
$('#email').parent('.forms_in_ap').addClass('modify-this');
$('#reEmail').parent('.forms_in_ap').addClass('modify-this');
$('#nogInFirstName').parent('.forms_in_ap').addClass('modify-this');
$('#nogInAccNumber').parent('.forms_in_ap').addClass('modify-this');
});
This will add the "modify-this" class to the divs that contain the 4 inputs with the IDs specified above. You can then style that class as normal.
Note that this works because each input is inside the div that you need to modify, meaning that the div is the parent of the input element. By entering the class "forms_in_ap" into the parent() function, we tell jquery to find the parent of the input that contains that class.
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).
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>
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms