I have two different sections that comprise of two radio buttons with different values and IDs. The problem is that I can check only one button at a time, but I need these two sets of radio buttons work independently, i.e. in each set of radio buttons one button could be checked.
Here's the HTML:
<section class="radio_holder_1">
<div class="radio">
<input id="share_this" type="radio" name="option_type" value="share_this" checked>
<label class="hmc_radiolabel" for="share_this">Share Picture</label>
<input id="use_4_now" type="radio" name="option_type" value="use_4_now">
<label class="hmc_radiolabel" for="use_4_now">Instant Use</label>
</div>
</section>
<hr>
<section class="radio_holder_2">
<div class="radio_2">
<input id="free" type="radio" name="option_type" value="free" checked>
<label class="hmc_radiolabel" for="free">FREE</label>
<input id="premium" type="radio" name="option_type" value="premium">
<label class="hmc_radiolabel" for="premium">VIP</label>
</div>
</section>
The problem is your name. Use a different name for the second selection and it should work.
<section class="radio_holder_1">
<div class="radio">
<input id="share_this" type="radio" name="option_type" value="share_this" checked>
<label class="hmc_radiolabel" for="share_this">Share Picture</label>
<input id="use_4_now" type="radio" name="option_type" value="use_4_now">
<label class="hmc_radiolabel" for="use_4_now">Instant Use</label>
</div>
</section>
<hr>
<section class="radio_holder_2">
<div class="radio_2">
<input id="free" type="radio" name="option_type2" value="free" checked>
<label class="hmc_radiolabel" for="free">FREE</label>
<input id="premium" type="radio" name="option_type2" value="premium">
<label class="hmc_radiolabel" for="premium">VIP</label>
</div>
</section>
Related
I need to have space between the first label and the inline radio button group as in the following image:
Example, space between I'm overweight or obese and Yes, No buttons etc and i need to have a horizontal line at bottom as in image. I tried the following:
<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 20px !important;">I'm overweight or obese
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
</label>
</div>
</div>
</form>
But the following css is not providing the space:
<label style="margin-right: 20px !important;">I'm overweight or obese
I tried right-padding too without any effect. How can i add space, the horizontal lines at bottom and multiple rows of buttons as in the image.
Soliciting help from CSS experts.
Your style margin-right: 20px is working the problem is you are putting the radio buttons inside that label only. So it is taking margin from the right side of the screen. Close the label tag before label with class radio and for the horizontal line, you can simply use hr tag.
<form class="j-forms" novalidate>
<div class="unit">
<div class="inline-group">
<label style="margin-right: 60px !important;">I'm overweight or obese</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
<div class="inline-group">
<label style="margin-right: 98px">I smoke cigarettes</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
No
</label>
<label class="radio">
<input type="radio" name="i-radio">
<i></i>
Don't know
</label>
<hr>
</div>
</div>
</form>
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.
hi I have a grouped radio buttons (they look like normal jquery buttons when grouped). and instead of text, i want an icon (or a small image) to be displayed on it. could anyone teach me how can i do this on jquery mobile?
Live Example:
http://jsfiddle.net/uZeDz/6/
Example:
<div data-role="page" id="radio-icons">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1"><img src="http://cdn2.iconfinder.com/data/icons/Snow/Snow/snow/Cat.png" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2"><img src="http://images.findicons.com/files/icons/8/dog/48/48_dog4.png" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3"><img src="http://icon.downv.com/32x32/5/142/1070746.0048c51761d5b53e5a2297e458ba0ff7.gif" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4"><img src="http://cdn6.droidmill.com/media/market-media/com.tinyminds.android.widgets.lizardbattery_icon.png" /></label>
</fieldset>
</div>
</div>
</div>