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>
Related
I am new to jquery, I stuck with one problem
Possible Duplicate
jQuery Mobile buttons on same row as controlgroup
But the provided solution does not worked for me.
I am trying to make a radio control group using jqm with a button on right side. I am creating the radio buttons . like this:-
<fieldset data-role="controlgroup" id="privacylistdata"
data-theme="c" class="ui-grid-a">
<label for="Setting1">Setting1</label> <input class="privacytype"
type="radio" name="privacy" id="Setting1"
value="Setting1">
<label for="Setting2">Setting2</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting3"
value="Setting3">
</fieldset>
I like to add a button on right most side of each radio control group in same row like this.
Please help me out.
Thanks.
One way to do this is to have to controlgroups side by side using a table:
<table class="privacylistdatatable">
<tr>
<td>
<fieldset data-role="controlgroup" id="privacylistdata" data-theme="c">
<label for="Setting1">Setting1</label>
<input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1">
<label for="Setting2">Setting2</label>
<input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label>
<input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3">
</fieldset>
</td>
<td class="rightColumn">
<fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c">
Icon only
Icon only
Icon only
</fieldset>
</td>
</tr>
</table>
Then use some CSS to make things line up nicely:
.privacylistdatatable {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.privacylistdatatable td {
padding: 0px;
}
.privacylistdatatable .rightColumn {
width: 24px;
}
.privacylistdatatable fieldset {
margin: 0;
}
#privacylistdata .ui-radio label {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#privacylistdataBtns .ui-btn {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
}
#privacylistdataBtns .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9px;
}
#privacylistdataBtns .ui-last-child .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9.5px;
}
DEMO
<div data-role="fieldcontain" style="font-size: 84%" > <!-- style="width: 48% ; float: right" -->
<fieldset data-role="controlgroup" data-type="horizontal" data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
<legend style="text-align: center ; ">גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
Jquery Mobile Radio buttons:
in the exmaple above I've managed to fit the horizontal radio buttons to exactly fit by trial and error.
How could it be done in code???
I assume you want the CSS the get the controlgroup looking like the image ?
If so, here is your HTML with all styles removed and some typos fixed:
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<legend >גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
DEMO
You should add data-inline="true". Check the demos for radio buttons on the jQuery Mobile site.
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;
}
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 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.