I have the following Radio buttons in jQuery Mobile as in the picture, and I need to increase the radio size since it is too small, I have adjusted the width and height attributes but it did not work.
How can I do that since I don't want them appear as buttons, I need them in this look?
Here is the code:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-choice" id="List" value="List" checked="checked" data-role="none" />
<label for="List">List</label>
<input type="radio" name="radio-choice" id="Grid" value="Grid" data-role="none" />
<label for="Grid">Grid</label>
<input type="radio" name="radio-choice" id="Gallery" value="Gallery" data-role="none"/>
<label for="Gallery">Gallery</label>
</fieldset>
Related
Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local #media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?
<style>
#media (max-width: 768px){
.radio-inline{
display:block;
}
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div>
<asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE
TEXT"/>
<br />
<br />
<asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-lg-12">
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>
You need to remove the spaces, " ", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>
I have a checkbox and a label for it, and within a label there is an input box. When I write something in input box, I don't expect checkbox to toggle (enable/disable). On Chrome and Firefox it works fine, but on Safari selecting input within label also toggles the checkbox.
How can I prevent this from happening?
Here is my code:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
The best solution is probably to move <input type="number"> outside <label>.
Example:
<div>
<input type="checkbox" name="xyz" id="xyz">
<p>
<input type="number" name="qty" id="qty">
<label for="xyz">
This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</p>
</div>
Remember that all form elements should have a corresponding label.
Read more about labels:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I suspect malformed HTML that is being fixed by Chrome/Firefox for you, but not fixed correctly in Safari. You should inspect the div in the debugger in each browser and see what each DOM gives you to be sure.
You have:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
You could do this instead with the same intent:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
This is my label for xyz checkbox
<input type="number" name="qty" id="qty"/>
</label>
</div>
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 am working on an android App using jQuery mobile,phonegap in which i have form i need to make the radio elements to be as native ones not as button like this
[1]: http://i.stack.imgur.com/YKEGa.png
, i do that by adding data-role="none" , but the radio size " selected circle " is too small how can i enlarge the radio size ?
please help me,
Thanks in advance.
You can basically style the fields as you wish. For example, the below theme has the style as you expect.
http://driftyco.github.io/graphite/
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
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>