I am trying to customise the relative widths of jQuery Mobile's horizontal grouped radio button sets.
By default, the relative dimensions of these are roughly (by eye only)
.ui-controlgroup-label 25%
.ui-controlgroup-controls 75%
I have tried to alter this split to 50:50 on the following html ...
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" id="ps_test">
<legend>
Quite a bit of of text to put here from time to time ...
</legend>
<input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
<label for="radio-choice-21">0</label>
<input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2" />
<label for="radio-choice-22">1</label>
<input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3" />
<label for="radio-choice-23">2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4" />
<label for="radio-choice-24">3</label>
<input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-4" />
<label for="radio-choice-25">4</label>
<input type="radio" name="radio-choice-2" id="radio-choice-26" value="choice-4" />
<label for="radio-choice-26">5</label>
<input type="radio" name="radio-choice-2" id="radio-choice-27" value="choice-4" />
<label for="radio-choice-27">6</label>
</fieldset>
</div>
</div><!-- /content -->
… using the following css ...
.ui-controlgroup-label {
width: 50%;
}
.ui-controlgroup-controls {
width: 50%;
}
… but this has no affect. I have saved an example of the code to view here
How do you alter the widths of the label and the button set?
Many thanks.
Your CSS isn't as high priority as the CSS in jQuery Mobile. If you change it to something like this it should be fine:
.ui-field-contain .ui-controlgroup-label {
width: 50%;
}
.ui-field-contain .ui-controlgroup-controls {
width: 50%;
}
Just use FireBug, Chrome Developer Tools, Dragonfly or IE Developer Tools next time.
Related
I am trying to make a simple profile page for an app i'm trying to put together.
It has 4 questions, the last of which is Gender.
The other three questions worked well with "field container text inputs," but i wanted to use radio buttons for the gender question.
When I try to align the Male/Female buttons with the Gender title they always are too close and not inline with the title.
What I'm trying to achieve is getting the buttons inline with Gender and at the same distance as the other three sections.
Here is what I have so far:
<div data-role="content">
<div data-role="fieldcontain">
<label for="height" style="font-size:25px"><strong>Height</strong></label>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> feet </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> inches OR </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px"> cm</p>
</div>
<div data-role="fieldcontain">
<label for="height" style="font-size:25px"><strong>Height</strong></label>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px; margin-right:10px"> pounds OR </p>
<input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" />
<p style="display: inline-block; margin-left:5px"> kg</p>
</div>
<div data-role="fieldcontain">
<label for="age" style="font-size:25px"><strong>Age</strong></label>
<input style="width: 5%" type="text" name="name" id="age" value="" />
</div>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<div style="display:inline !important;">
<label style="font-size:25px"><strong>Gender</strong></label>
</div>
<div style="display:inline-block !important; float:right !important;">
<input type="radio" name="radio-choice" id="male" value="choice-1" />
<label for="male">Male</label>
<input type="radio" name="radio-choice" id="female" value="choice-2" />
<label for="female">Female</label>
</div>
</fieldset>
</div>
Change markup for Gender field group to following:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend><strong style="font-size:25px">Gender</strong></legend>
<input type="radio" name="radio-choice" id="male" value="choice-1" checked="checked" />
<label for="male">Male</label>
<input type="radio" name="radio-choice" id="female" value="choice-2" />
<label for="female">Female</label>
</fieldset>
</div>
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>
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 -->
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;
}
i'm using the jquery ui button, is it possible to display the radio button vertically?it seems to default to horizontal.
http://jqueryui.com/demos/button/#radio
many thanks
I wrote a short plugin that implement vertical buttonset for radio buttons and checkboxes with jquery ui.
1. jQuery Plugin
(function( $ ){
//plugin buttonset vertical
$.fn.buttonsetv = function() {
$(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>');
$(this).buttonset();
$('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top');
$('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
var maxWidth = 0; // max witdh
$('label', this).each(function(index){
var labelWidth = $(this).width();
if (labelWidth > maxWidth ) maxWidth = labelWidth ;
})
$('label', this).each(function(index){
$(this).width(maxWidth);
})
};
})( jQuery );
2. Sample markup
<h2> Radio Buttonset </h2>
<div id="radio">
<input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label>
</div>
<h2> Checkbox Buttonset </h2>
<div id="checkbox">
<input type="checkbox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label>
<input type="checkbox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label>
<input type="checkbox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label>
</div>
3. Plugin Usage
$(document).ready(function(){
//call plugin
$("#radio").buttonsetv();
$("#checkbox").buttonsetv();
});
Here the plugin and example code
I hope this can help you :)
Place the individual buttons in their own div tags.
Credit to leacar21 from: https://forum.jquery.com/topic/how-to-vertical-radio-button-set
<div id="someSet">
<div><input type="radio" id="button1"... ></div>
<div><input type="radio" id="button2"... ></div>
<div><input type="radio" id="button3"... ></div>
</div>
There isn't a built-in way to do this...not at the moment anyway. The markup and styling is built around a horizontal set.