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>
Related
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 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>
I cannot figure out for the life of my why this jquery mobile panel won't render with the same look and feel of the jquery mobile theme used in the application.
The panel is loading on the same page as the rest of my jquery mobile page so the jquery mobile css files and jquery js files are all referenced and working on other parts of the page.
What am I missing within my layout?
thanks
<div data-role="page" id="map_page">
<div data-role="panel" id="transitLayersPage" data-position="right" data-display="overlay">
<div data-role="header">
<h1>Routes</h1>
</div>
<div data-role="controlgroup">
<div id="checkboxes">
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(0)" />
<label>Routes 1</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(1)" />
<label>Routes 2</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(2)" />
<label>Routes 3</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(3)" />
<label>Routes 4</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(4)" />
<label>Routes 5</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(5)" />
<label>Routes 6a</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(6)" />
<label>Routes 6b</label>
</div>
Close panel
</div>
</div>
You forgot to add for attribute to label. Moreover, you should not use duplicate id for checkbox, each checkbox must have a unique id.
<input type="checkbox" id="foo">
<label for="foo">bar</label>
Demo
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.