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>
Related
I have some disabled input text fields that I want the text color to be black because it's too greyed out.
I know its a simple one-line code but it won't work for some reason.
Other CSS properties work while it's disabled like the background color and stuff but not the text color.
Here's the CSS:
input[type="text"]:disabled {
color: black;
}
Here's the HTML:
<div class="form-container">
<label for="name">Full Name:</label>
<input id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
This is what it looks like on the android emulator running API 28.
I'm not sure why other properties work but not the text color.
Any ideas?
P.S. this is a cordova project and i am building it in Jquery Mobile v1.4.5
Nice to reply to you about the issue you are facing.
Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.
So, add this:-
.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }
Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/
Hope it works for you.
Thanks
Can you use this one.
.form-container input:disabled{color: black}
<div class="form-container">
<label for="name">Full Name:</label>
<input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
Hope It Helps.
I have an options panel for Wordpress. I have some radio buttons that work perfect. But when I click radio button 2 and save it then it goes back to 3?
The weird thing is that is echos 2 in my theme? Any suggestions?
<label for="Slider_Shadow_Type">Slider Shadow</label>
<br />
<input name="Slider_Shadow_Type" checked="checked" type="radio" value="None" >
<br />
<input name="Slider_Shadow_Type" checked="checked" type="radio" value="Shadow 1" >
<br />
<input name="Slider_Shadow_Type" checked="checked" type="radio" value="Shadow 2" >
<br />
<input name="Slider_Shadow_Type" checked="checked" type="radio" value="Shadow 3" >
<small>Select the shadow style.</small><div class="clearfix"></div>
They are all set to checked, so it will revert to the last one in the list, i.e. 'Shadow 3'. remove the 'checked="checked".
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>
Say I have the following mark up:
<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>
The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?
You don't need CSS. Wrap your input in a label and put the text last.
<label><input type="radio" name="name" id="name"/>Name:</label>
Is that still semantic for you?
Or you could try the float.
Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.
To answer your question: just do it in the order you want to display it
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
fiddle http://jsfiddle.net/Jm2JR/1/..
write like this:
input{
float:left;
}
Check this http://jsfiddle.net/3cLRg/
<label for="name" style="float:right;">Name:</label>
try this:
<label style="position:relative; left:100px;" for="name">Name:</label>
<input type="radio" name="name" id="name"/>
2nd approach is :
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
Hi you just define your input tag as like that
<label>Name:
<input type="radio" name="name" id="name"/></label>
<br />
<label>
<input type="radio" name="name" id="name"/> Name
</label>
Live demo http://jsfiddle.net/rohitazad/bhBQn/1/
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>