Probably has been asked before but didn't manage to find an answer.
I would simply like to right align the bootstrap4 toggle buttons.
<ul >
<li>
<label for="test1">Small Length Label</label>
<input id="test1" class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
<li>
<label for="test2">Longer__ Length Label </label>
<input id="test2" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
<li>
<label for="test3">Longer_Longer_Longer Label </label>
<input id="test3" style="float: right" checked data-toggle="toggle" type="checkbox" />
</li>
</ul>
Here is a JSFiddle showing the current alignment.
I would like the toggle buttons to be on the same column no matter the text length.
I think what you're looking for is <div class="d-flex justify-content-between">
Just wrap the elements inside the li like this:
<li>
<div class="d-flex justify-content-between">
<label for="test1">Small Length Label</label>
<input id="test1" class="float-right" style="float: right" checked data-toggle="toggle" type="checkbox" />
</div>
</li>
To have space between the text and input
I would use flexbox for this. Just add the following classes to the ul element: d-flex flex-column align-items-end. And, optionally, a width of your choice.
Related
Narrator announces incorrect information as "non-selected" when focus moves to the radio button.
it should be speaking about radio button selected 1 of 2
<div>
<div tabindex="0" role="radio">
<ul>
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
<label for="Public">Public</label></li>
</ul>
</div>
<div tabindex="0" role="radio">
<ul class="react-custom-radio-button">
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
</ul>
</div>
</div>
It happens because it focuses first on the div which has a tabindex attribute. If you continue to the radio it will announce the correct status. My fix was to remove the focus-ability from the div
<div>
<div role="radio">
<ul>
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
<label for="Public">Public</label></li>
</ul>
</div>
<div role="radio">
<ul class="react-custom-radio-button">
<li class="react-custom-radio-link">
<input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
</ul>
</div>
</div>
I'm using bootstrap toggle to create switches like so:
<form>
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
Toggle Text Right
</label>
</div>
<div class="checkbox">
<label>
Toggle Text Left
<input type="checkbox" data-toggle="toggle" />
</label>
</div>
</form>
Is there a way to move the label to the left of the switch? I tried by putting the text before the input, but it doesn't fit well.
http://jsfiddle.net/sjxd1vpt/2/
Or if you do not specifically need the label tag you could use a span.
<form>
<div class="checkbox">
<input type="checkbox" data-toggle="toggle" checked="checked" />
<span>
Toggle Text Right
</span>
</div>
<div class="checkbox">
<span>
Toggle Text Left
</span>
<input type="checkbox" data-toggle="toggle" />
</div>
It appears the bootstrap-toggle css has a margin-left: -20px;
Simply add a custom class to the desired left label like so.
.left .toggle {
margin-left: 5px;
}
This will maintain the structure Bootstrap-Toggle expects in case they have styling tied in such as:
label input {
// some input targeted styling
}
http://jsfiddle.net/sjxd1vpt/5/
You should use bootstrap container-fluid wrappers to achieve the effect.
<form>
<div class="checkbox container-fluid" >
<label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
Toggle Text Right
</label>
</div>
<div class="checkbox container">
<label>
Toggle Text Left
</label>
<input type="checkbox" data-toggle="toggle" />
</div>
Your label tag should be closed before the input tag.
<form>
<div class="checkbox">
<label> Toggle Text Right </label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
</div>
<div class="checkbox">
<label> Toggle Text Left </label>
<input type="checkbox" data-toggle="toggle" />
</div>
</form>
This should prevent the button toggle from overlapping on the text.
Here : http://jsfiddle.net/sjxd1vpt/4/
I'm trying to align a radio button, an input and some text inside one of my list-group-items, it looks good #desktop but #mobile it goes one on top of the other.
This is my code so far
<div class="panel panel-default">
<div class="panel-body">
<span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
<ul class="list-group">
<li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
<li class="list-group-item">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
</div>
</div>
</li>
</ul>
</div>
</div>
Is there anything I can do to have it responsive and aligned in mobile as well as dekstop?
You can use col-xs-* in place of col-md-*: fiddle example
<div class="col-xs-1">
<input name="n" type="radio" >
</div>
<div class="col-xs-3">
<input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
text<strong>8,55 €</strong>
</div>
Hello I am familiar with Bootstrap, but not very experienced with it. I am using it to create a static form, but I can't seem to get these panels to sit side by side with the "col-md-6" class tag inside of the rows.
I've been trying to read the Bootstrap documentation as well as look at other examples, but so far no luck. I've been spinning my wheels modifying classes, changing divs, adding divs, and just having no luck what so ever.
Below is the code I have extracted from my form which is the probelmatic area.
<div class="container">
<div class="form-group col-md-6">
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="strategy" class="control-label">Strategy</label>
<input type="text" class="form-control" id="strategy" placeholder="Strategy" />
</div>
<br/>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<label>Type of Service:</label>
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Transport
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Storage
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Balancing
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Park/Lend
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
<input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
</div>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Hub/Wheel
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Exchange
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Pooling
</li>
<li class="checkbox">
Other:
<input type="checkbox" value="" />
<div class="col-xs-2">
<input type="text" class="form-control" id="other" placeholder="" />
</div>
</li>
</ul>
</div>
</div>
</div>
Now I have had form tags in here and tried form-inline as well as form-horizontal, but I am basically trying to have each panel sit side by side with one another. I also seem to be having an issue with the "Other" label appearing after the input box.
Fiddle for good measure : Fiddle
*There is probably a better way for me to position the elements on the next line as opposed to the break lines that I used, but like I said, I am new to Bootstrap and will only learn by doing. I assumed using the "row" would stack them vertically.
I had a quick fiddle with it. I think you should be able to use this to work with.
JSFiddle here
Note: I used
form-group
and tidied up the col's to help layout the form elements.
Is there anyway to get the text of a checkbox to be on the left side of the checkbox? I have tried and tried but cant get it working.
I'm using
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox style-2 " checked="checked">
<span>Text goes here</span>
</label>
</div>
I have tried putting the span on top and that also doesn't work, Then if I make it a blank checkbox and just put text in front then they don't line up.
any help would be really appreciated.
Bootstrap styling will float the checkbox elements to the left because of this styling:
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
To solve this, you could simply add pull-right to the input element's class:
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
It's also worth noting that a label element should have a for attribute matching the input element's id attribute, like this:
<div class="checkbox">
<label for="checkbox1">
<span>Text goes here</span>
</label>
<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>
UPDATED EXAMPLE HERE
Using form-check-prepend in parent div
<form>
<div>
<div class="form-check-prepend">
<label class="form-input-label" for="checkbox1">
This is the label for the checkbox
</label>
<input
type="checkbox1"
class="form-check-input pull-right"
id="checkbox1"
/>
</div>
</div>
</form>
I'm currently using this on my website. I have not tested it across different devices and/or browsers. Comments welcome...
This should do it! JSFiddle
<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>
How about this (note left-checkbox class):
<div class="form-group">
<div class="col-xs-4">
<div class="checkbox left-checkbox">
<label>
Text goes here
</label>
</div>
</div>
<div class="col-xs-8">
<div class="checkbox left-checkbox">
<input type="checkbox">
</div>
</div>
</div>
with css
.left-checkbox label {
text-align: right;
float: right;
font-weight: bold;
}
.left-checkbox input[type=checkbox] {
margin-left: 0;
}
Looks fine to me.
I am always looking for simple solutions first.
A KISS solution is:
<span style="white-space: nowrap;">Do Not Reverse Import
<label>
<input
type="checkbox"
name="DoNotReverseImport"
value="DoNotReverseImport"
OnChange = "OffYouGo('DoNotReverseImport');"
title = 'Check if old entries appear first in your import'
>
</label>
</span>
There are 2 things to correct to have Bootstrap 3 checkbox to the right of label text:
margin-left: -20px for checkbox
padding-left: 20px for label
Checkbox's size is 12.8px.
So our new values should be:
for checkbox: margin-left: 7.2px
for label: padding-right: 20px
Here is an example:
.checkbox.checkbox-left-label label,
.checkbox-inline.checkbox-left-label {
padding-left: unset;
padding-right: 20px;
}
.checkbox.checkbox-left-label input[type=checkbox],
.checkbox-inline.checkbox-left-label input[type=checkbox] {
margin-left: 7.2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h5>Checkboxes with labels on the left side:</h5>
<p>
<div class="checkbox checkbox-left-label">
<label>Option 1<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label">
<label>Option 2<input type="checkbox" value=""></label>
</div>
<div class="checkbox checkbox-left-label disabled">
<label>Option 3<input type="checkbox" value="" disabled></label>
</div>
</p>
</div>
<div class="container">
<h5>Inline checkboxes with labels on the left side:</h5>
<p>
<label class="checkbox-inline checkbox-left-label">Option 1<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label">Option 2<input type="checkbox" value=""></label>
<label class="checkbox-inline checkbox-left-label disabled">Option 3<input type="checkbox" value="" disabled></label>
</p>
</div>