This is my HTML code:
<label class="control-label col-md-4">Availability <span class="required">*</span></label>
<div class="field_wrapper col-md-8">
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Sunday" tabindex="14">Sunday
</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Monday" tabindex="14">Monday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Tuesday" tabindex="14">Tuesday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Wednesday" tabindex="14">Wednesday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Thursday" tabindex="14">Thursday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Friday" tabindex="14">Friday</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="Saturday" tabindex="14">Saturday
</label>
<label class="checkbox">
<input type="checkbox" name="custom[availability][]" class="reg_form_availability" value="All week long" tabindex="14">All week long</label>
<input type="hidden" name="custom[availability][]" value="--">
<p class="description">Please specify the week days the trip can be offered</p>
</div>
The output looks something like this, just with a checkbox on the left of every selection:
Availability *
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
All week long
Please specify the week days the trip can be offered
How can I change the selections to be on the same line floating left? Two lines is better actually (4 selections each line). If i had accesses to the HTML code I probably would have use bootstrap col-md to do so but the problem that this is a WordPress website and the HTML is not shown as it is above in the PHP files.
Thanks in advance,
Yaniv
Related
i'm using laravel form my project with dompdf module for create pdf reports. I have a problem to show in the same line the checkbox and label.
i'm trying with this:
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
and this is the result:
check in Bootstrap website
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
OR try to use tables
There's some other CSS affecting the alignments. The checkbox and the label are in the same line by default.
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
I have the following form:
<form>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
One.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Two.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Three.
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
Four.
</label>
</div>
</form>
I understand that I can use the following to style checkboxes that are checked:
.form-check-input:checked + label {
color: blue
}
I have a form with a varying number of multiple checkboxes. Is there a way to apply the style only if all checkboxes in a form are checked?
I would like to do this in CSS only.
If all of your checkboxes are required you can leverage the :valid pseudo-class on the form to select it or any of its descendants.
Else as #Pete said there is currently no way to do it.
Using v3.3.7
No matter how long I mess with this, I cant seem to get this radio button done properly. It always looks weird... in he code below, you will see that i am trying to have the 2 options lid out inline, next to each other.
But they seem to cover their labels, and the actual input is huge...
Relevant code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
Female
</label>
</div>
</div>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
Female
</label>
</div>
</div>
LINK: https://mizrachi.coda.co.il/radio.asp
Many thanks
You just need to remove the .form-control classes if you want them to be inline like that.
http://getbootstrap.com/css/
All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required" title="*">
Female
</label>
</div>
</div>
Just remove form-control class of your radio buttons.
I'm using bootstrap CSS and i have a form that use radio button , it works in Chrome
and when i use Firefox the labels and the button collapses.
Here is the code
<form class="form-horizontal" method="post" action="registerResult.php">
<fieldset>
<div class="control-group">
<label class="control-label">Gender :</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="male" checked></div>
Male
</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="female" checked></div>
Female
</label>
</div>
</fieldset>
</form>
Here is the screenshot :
Check this:
<div class="control-group">
<label class="control-label">Gender:</label>
<div class="controls">
<label class="radio">
<input type="radio" name="Gender" value="Male"> Male
</label>
<label class="radio">
<input type="radio" name="Gender" value="Female"> Female
</label>
<label class="radio">
<input type="radio" name="Gender" value="Other"> Other
</label>
</div>
</div>
I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:
<form>
<div class="control-group">
<label class="control-label">Some label</label>
<div class="controls">
<label class="radio inline">
<input type="radio" value="1"/>
First
</label>
<label class="radio inline">
<input type="radio" value="2"/>
Second
</label>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/GaDbZ/2/
I also tried this:
<form>
<div class="form-inline">
<label class="control-label">Some label</label>
<label class="radio">
<input type="radio" value="1"/>
First
</label>
<label class="radio">
<input type="radio" value="2"/>
Second
</label>
</div>
</form>
But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/
How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?
Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontal because it creates funky margins that don't jive with the other stuff I have in there.
If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.
<label class="radio control-label">Some label</label>
OR for 'radio inline'
<label class="radio-inline control-label">Some label</label>
Since Bootstrap 3 you have to use checkbox-inline and radio-inline classes on the label.
This takes care of vertical alignment.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
This may work for you, Please try this.
<form>
<div class="form-inline">
<div class="controls-row">
<label class="control-label">Some label</label>
<label class="radio inline">
<input type="radio" value="1" />First
</label>
<label class="radio inline">
<input type="radio" value="2" />Second
</label>
</div>
</div>
</form>
This is all nicely lined up including the field label. Lining up the field label was the tricky part.
HTML Code:
<div class="form-group">
<label class="control-label col-md-5">Create a</label>
<div class="col-md-7">
<label class="radio-inline control-label">
<input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
</label>
<label class="radio-inline control-label">
<input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
</label>
</div>
</div>
CSHTML / Razor Code:
<div class="form-group">
#Html.Label("Create a", htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
</label>
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
</label>
</div>
</div>
In Bootstrap 4 you can use the form-check-inline class.
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option1" value="1">
<label class="form-check-label" for="option1">First</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option2" value="2">
<label class="form-check-label" for="option2">Second</label>
</div>
Key insights for me were:
- ensure that label content comes after the input-radio field
- I tweaked my css to make everything a little closer
.radio-inline+.radio-inline {
margin-left: 5px;
}
Best is to just Apply margin-top: 2px on the input element.
Bootstrap adds a margin-top: 4px to input element causing radio button to move down than the content.