jquerymobile text input with radio buttons - jquery-mobile

Here is my demo http://jsfiddle.net/PZGQp/3/
In 'group 1' I have a radio group as a vertical controlgroup.
I am trying to put a text field to the right of each radio button - as in 'group 2' (code below).
Is it possible to do this while retaining the controlgroup behaviour of the radio buttons - failing that to have rounded rather than square corners on the radio buttons?
<fieldset data-role="controlgroup" data-theme="b">
<table width="100%">
<tr>
<td width="80%"><input type="radio" id="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<tr>
<td width="80%"><input type="radio" id="radio-2" value="" class="radioclass" />
<label for="radio-2">2</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
<td width="80%"><input type="radio" id="radio-3" value="" class="radioclass" />
<label for="radio-3">3</label></td>
<td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
</tr>
</table>
</fieldset>

I hope I understood you correctly.
Working jsFiddle example: http://jsfiddle.net/Gajotres/uwq8b/
HTML used:
<div class="ui-grid-a">
<div class="ui-block-a">
<fieldset data-role="controlgroup" data-theme="a">
<input type="radio" id="radio-1" name="radio-1" value="" class="radioclass" />
<label for="radio-1">1</label>
<input type="radio" id="radio-2" name="radio-1" value="" class="radioclass" />
<label for="radio-2">2</label>
<input type="radio" id="radio-3" name="radio-1" value="" class="radioclass" />
<label for="radio-3">3</label>
</fieldset>
</div>
<div class="ui-block-b">
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
<input type="text" placeholder="Qty" id="qty"/>
</div>
</div><!-- /grid-a -->
CSS used:
.ui-block-a {
width: 80% !important;
padding-top: 0.5em;
}
.ui-block-b {
width: 20% !important;
padding-top: 0.5em;
}
fieldset.ui-controlgroup {
margin: 0 !important;
}
div.ui-input-text {
margin: 0 0 0.3em 0 !important;
}

Related

Set inline 2 control group jQuery Mobile

I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.
See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO

aligning form fields centrally

I need two form fields in each line both against ab imaginary vertical central line, with the labels preferably on top, otherwise on each end away from the centre.
The nearest I have come is in
How to align multiple form elements?
but I need to place the fields in the middle.
can you help?
Thank you
qim
PS - I apologize if this is too vague but I only met HTML/CSS 10 days ago and I am a bit lost.
Try this may be it is helpful to you:
<div style="width: 100%; text-align: center; height: 100px;">
Label1
<div>
<input type="text" />
</div>
Label2
<div>
<input type="text" />
</div>
</div>
Do you need like this:
<div style="width: 100%; text-align: center; height: 100px;">
Label1
<div>
<input type="text" style="margin-right:5px;">
<input type="text" style="margin-left:5px;">
</div>
Label2
<div>
<input type="text" style="margin-right:5px;">
<input type="text" style="margin-left:5px;">
</div>
</div>
<div style="width: 100%; text-align: center; height: 100px;">
<div style="float: left; text-align: right; width: 47%;">
Label1
</div>
<div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
Label2
</div>
<div>
<input type="text" />
<input type="text" />
</div>
<div style="float: left; text-align: right; width: 47%;">
Label3
</div>
<div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
Label4
</div>
<div>
<input type="text" />
<input type="text" />
</div>
</div>
or simply use this :
<table style="width: auto; text-align: center; margin: 0 auto;">
<tr>
<td>
Label1
</td>
<td>
Label2
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
Label3
</td>
<td>
Label4
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>

How to vertical center align and title and radio buttons

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>

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>

Not set Value for RadioButton in asp.net mvc

I use asp.net mvc with ViewEngine Razor and write the Radiobuttons so in html of the page:
<form id="ProductForm" method="post" action="#Url.Action("..", "..", new { area = "..." })">
<fieldset>
<div style="float: left; width: 550px; margin-top: 5px;">
<div class="editor-label">
<label for="DescriptionId">FullDescription</label>
</div>
<div class="editor-field">
<div style=" border: 1px solid Gray;">
<input type="hidden" name="DescriptionId" id="DescriptionId"/>
<div>
<input type="radio" name="radioDescription" id="radioDescriptionNew" value="New" checked="checked" />New
<input type="radio" name="radioDescription" id="radioDescriptionExist" value="Exist" />Exist
<span id="DescriptionChooseHref" style=" visibility: hidden;">(Select)</span>
</div>
<div>
<textarea id="DescriptionText" style=" width: 530px; height: 200px; margin: 5px 0 5px 5px" placeholder="Full Description"></textarea>
</div>
</div>
</div>
</div>
...
</fieldset>
</form>
But when I run my site I see there in HTML:
<input type="radio" name="radioDescription" value checked="checked" />
<input type="radio" name="radioDescription" value />
What I do wrong? Thank's.

Resources