An extra radio circle appear when create a radio button in jQuery mobile - jquery-mobile

When i create a radio button in jQuery mobile, a radio circle appear in the next of the created radio as appear in the photo , why this extra radio circle appear ? how can i solve this ?? please help me ...
<fieldset>
<legend> Gender </legend>
<div class="ui-grid-a">
<div class="ui-block-a ">
<input type="radio" id="Male" name="radio-group-1" value="Male" />
<label for="Male" data-inline="true">Male</label>
</div>
<div class="ui-block-b">
<input type="radio" id="Female" name="radio-group-1" value="Female" />
<label for="Female" data-inline="true" >Female</label>
</div>
</div>

Override .ui-radio class when you want to change radio button position.
.ui-radio {
float:right;
text-align:right;
}
Hide radio buttons with a transparent background
.ui-radio input[type="radio"] {
display: none;
}
Demo

Related

How to resize the text area in query mobile?

Can you please tell me how to resize the text area? Actually the problem is that I open the pop up screen on button click. In my pop up screen I have one text area (having small area).
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
I write many characters on that text area and than close it. Again I open this and it has the same area that was before closing(large area)? How to resize that text area so that it starts with same starting size.
My code:
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b"> Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div>
<img src="img/Documents.png" />
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
</div>
<div data-role="fieldcontain">
<label for="caseDate" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h">
<!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Case Notes :</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/7JqRG/3/
Just use this CSS:
#text-12 {
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
}
It will lock textarea height. !important must be used to override default values.
$('#text-12').css('width','whatyouwant');
or
$('#text-12').attr('cols','whatyouwant'); //for the width
$('#text-12').attr('rows','whatyouwant'); //for the height

JQM: Is it possible to put controlgroups inside a collapsible bar and not propagate the click event?

My real desire is to create a selectable tree for JQM (with 3 values for each element). I tried to do with nested collapsible divisions, and this works fine. But when I tried to add the 3 radios on each collapsible bar, the events don't fire properly.
I think the collapse/expand event hooks the click event of the radios. The effect is when you click the radios, the collapsible is expanded and the radio is not checked.
<div data-role="collapsible" data-theme="b" data-content-theme="d" id="accordion1">
<h3>60
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-asign" value="60-asign">
<label for="selcrit-CLP-60-asign">Asign</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-omit" value="60-omit">
<label for="selcrit-CLP-60-omit">Omit</label>
<input type="radio" name="selcrit-CLP-60" id="selcrit-CLP-60-nothing" value="60-nothing">
<label for="selcrit-CLP-60-nothing">Nothing</label>
</fieldset>
</h3>
<div stylee="margin: 0 10px;">
Content for 60
</div>
Here is the jsfiddle with the example: http://jsfiddle.net/Hz8Ef/
Any idea? Can I do in other way?
Solved!
$(document).ready(function() {
$("div .ui-radio").click(
function(e){
var radioId = $(this).children(":first").attr('name');
$('input[name=' + radioId + ']').checkboxradio( "refresh" );
e.stopPropagation();
}
);
});
Here the complete solution: http://jsfiddle.net/VuaQg/1/

Jquery mobile grouping buttons and input box

In JQuery Mobile, I am trying to group buttons with an input box in the middle.
Below is my code
<div data-role="controlgroup" data-type="horizontal">
Yes
<input type="text" value="0" min="0" max="20" size="2" />
Maybe
</div>
This is the result
Any ideas would be great?
The radio buttons need an aggressive case of display:inline !important; ... Here is a list with 2 lines, one normal buttons and one mini's.
Hope it helps. http://jsfiddle.net/den232/5mVv8/
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">A1</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">B1</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="left" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">AA</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">BB</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="e2" class='miniinputheight'></input>
</div>
<div class='floatright closespacing'>
<div class='floatright textwidth'>
<input type="text" placeholder="e3" class='miniinputheight'></input>
</div>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->
By default buttons take up the entire width of the view port. Try using the data-inline attribute to change that.
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-inline.html
You'll also need some css to get the input looking right. The following seemed to work for me. You'll probably need to adjust the width depending on what you're going for.
input.ui-input-text {
float: left;
position: relative;
display: inline-block;
width: 50%;
}
This solution works for me and hope it helps someone else seeking the same.
.controlgroup-textinput{
padding-top:.22em;
padding-bottom:.22em;
}
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
Yes
<input type="text" value="0" min="0" max="20" size="2" data-wrapper-class="controlgroup-textinput ui-btn" />
Maybe
</fieldset>

2 Radio buttons on same line in jquery mobile and dispaly phone number field

I am trying form design in jquery mobile. In my form i want to show two radio buttons on same line. I try to use display: inline but not working.
Second one I searched in jquery mobile documentation for showing phone number field with three text field(separating the phone number) but i didn't get any design like this. Any suggestions to how to do this in jquery mobile.
I think the solution you are looking for maybe involving Content Grids.
Documentation: http://jquerymobile.com/test/docs/content/content-grids.html
I have mocked up some HTML for doing this for radio buttons and text boxes, but your situation may be a little different.
Take a look at this example: http://jsfiddle.net/shanabus/XxB6Y/
Also, check out this documentation page for text inputs for (telephone) numbers:
In jQuery Mobile, you can use existing and new HTML5 input types such
as password, email, tel, number, and more.
From here: http://jquerymobile.com/test/docs/forms/textinputs/
I found the solution to how to get phone number with three text field like xxx-xxx-xxxx.
Demo: http://jsfiddle.net/XxB6Y/1/
Radio buttons need very aggressive display:inline !important; ... In addition you have to fiddle with the heights of those text boxes to make them align nicely. Here is two versions for you, one with normal buttons and the other with the minis.
http://jsfiddle.net/den232/bVF3B/
Good Luck!
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Big Buttons<br>More Text
</div>
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">A1</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">B1</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#1" class='biginputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#2" class='biginputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#3" class='biginputheight'></input>
</div>
<div class='floatright textwidth'>
<input type="text" placeholder="right" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Small Buttons
</div>
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">AA</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">BB</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s1" class='miniinputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s2" class='miniinputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s2" class='miniinputheight'></input>
</div>
<div class='floatright closespacing'>
<div class='floatright closespacing'>
e3 Text<br>on right
</div>
<div class='floatright textwidth'>
<input type="text" placeholder="e3" class='miniinputheight'></input>
</div>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->

Styling the controlgroup buttons in Jquery Mobile

I have a controlgroup with grouping 3 radio buttons to look like buttons, and what I want to do is to to colour the button on click of each one. Clicking the "Red" will change the colour of the button to "Red"
The code is below
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rd1" id="rd1" value="R" />
<label for="rd1">Red</label>
<input type="radio" name="rd2" id="rd2" value="G" />
<label for="rd2">Green</label>
<input type="radio" name="rd3" id="rd3" value="B" />
<label for="rd3">Blue</label>
</fieldset>
Can somebody please help me on this.
Live Example:
http://jsfiddle.net/phillpafford/fAYEw/5/
JS
$('input[name=rdColor]').change(function() {
$(this).next().addClass($(this).val());
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="rdColor" id="rd1" value="R" />
<label for="rd1">Red</label>
<input type="radio" name="rdColor" id="rd2" value="G" />
<label for="rd2">Green</label>
<input type="radio" name="rdColor" id="rd3" value="B" />
<label for="rd3">Blue</label>
</fieldset>
</div>
</div>
</div>
CSS
.R {
background:red;
}
.B {
background:blue;
}
.G {
background:green;
}

Resources