Im using jQuery Mobile and I have a horizontal toggle set.
I would like to center it in the page, or I would like to stretch it so that it takes up 100% of the width.
Either would be good for what I am doing.
I have tried a lot of different approaches but none have worked so far.
Using jQuery Mobile v1.0
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" class="custom"/>
<label for="monday">Monday</label>
<input type="checkbox" name="tuesday" id="tuesday" class="custom" />
<label for="tuesday">Tuesday</label>
<input type="checkbox" name="wednesday" id="wednesday" class="custom" />
<label for="wednesday">Wednesday</label>
<input type="checkbox" name="thursday" id="thursday" class="custom" />
<label for="thursday">Thursday</label>
<input type="checkbox" name="friday" id="friday" class="custom" />
<label for="friday">Friday</label>
<input type="checkbox" name="saturday" id="saturday" class="custom" />
<label for="saturday">Saturday</label>
<input type="checkbox" name="sunday" id="sunday" class="custom" />
<label for="sunday">Sunday</label>
</fieldset>
I just had this same problem and I solved it by adding by putting the fieldset within a div which has text-align: center and then setting the display of the fieldset to inline.
E.g.
HTML
<div class="custom">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" />
<label for="monday">Monday</label>
...
</fieldset>
</div>
CSS
.custom {
text-align: center;
}
.custom fieldset {
display: inline;
}
Setting the display of the fieldset to inline may have some other effects, for example I noticed that the margins/padding changed slightly, but apart from that it did what I wanted.
Related
Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local #media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?
<style>
#media (max-width: 768px){
.radio-inline{
display:block;
}
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div>
<asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE
TEXT"/>
<br />
<br />
<asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-lg-12">
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>
You need to remove the spaces, " ", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>
I'm trying to get radio buttons to stack on top of each other instead of display side by side.
I have several form labels defined as inline-block with a width of 150, for the purpose of aligning the input boxes.
I Know how to do this without a label, but when the labels sit to the left, I can't figure it out.
HTML:
<form action="here.php" method="POST">
<p>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value"male">Male
<input type="radio" name="gender" value"female">Female
</p>
<p>
<input type="submit" name="input" value="Submit">
</p>
</form>
CSS:
form {
width:356px;
margin: 0 auto;
}
label {
width:150px;
display: inline-block;
}
How do I get "female" to sit directly under "male".
I've gotten close but I don't think its the right way. I combined the radio button inputs in a <p> then floated its label and itself to the left, added a <br />, then cleared the submit button, but it doesn't look that great.
Advice please? Thanks a bunch,
Josh
I'd suggest reorganising your HTML, to the following:
form {
width: 356px;
margin: 0 auto;
}
fieldset {
margin: 0.5em auto;
width: 90%;;
}
label {
width: 150px;
display: inline-block;
}
fieldset fieldset label {
width: auto;
margin-left: 150px;
}
<form action="here.php" method="POST">
<fieldset>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
<!-- a fieldset groups related input elements together -->
<fieldset>
<!-- a <legend> labels a section of the <form>, identifying
the grouped <inputs>, a <label> was utterly wrong for
this, given it was, and can be, associated with only
one of the <input>s -->
<legend>Gender</legend>
<!-- wrapping the <input> associates the <input> with the appropriate
(parent) label -->
<label>
<input type="radio" name="gender" value="male">Male</label>
<!-- inciedentally, the '=' is not optional, and you were
missing them here to identify the value and its
associated attribute-value -->
<label>
<input type="radio" name="gender" value="female">Female</label>
</fieldset>
<input type="submit" name="input" value="Submit">
</fieldset>
</form>
Add a break?
<input type="radio" name="gender" value"male">Male<br />
<input type="radio" name="gender" value"female">Female
You can put each of the radio inputs in a div ( or other block element ) and then they will sit on top of each other. You could then style those divs using CSS for any other styling you want.
I try currently to beautify my sources a little bit. For this I want to change the width of buttons and radio buttons to 80% and change the alignment to center. For the buttons I made css settings that works quite fine, but I am not able to center the radio button group.
HTML:
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</fieldset>
</br>
<hr>
</br>
Button
</div>
CSS:
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
The single button at the end is now at 80% width and perfect centered. The radio buttons are also at 80% width but still left aligned. At the web I found some solutions for horizontal radio button groups, but this solutions does not work with data-type="vertical". Is there a way to center this, too?
Thank you very much for helping me :-).
JSFIDDLE: http://jsfiddle.net/7eKZb
Use jQuery Mobile grid system, ui-grid-b and 3 blocks ui-block-a, ui-block-b and ui-block-c.
Demo
<div class="ui-grid-b">
<div class="ui-block-left ui-block-a"><!-- Placeholder --></div>
<div class="ui-block-center ui-block-b">
<fieldset data-role="controlgroup">
<!-- Buttons go here -->
</fieldset>
</div>
<div class="ui-block-right ui-block-c"><!-- Placeholder --></div>
</div>
And override width of blocks a, b and c. I used extra custom classes in order not to override other blocks.
.ui-block-left, .ui-block-right {
width: 10% !important;
}
.ui-block-center {
width: 80% !important;
}
See this fiddle http://jsfiddle.net/bB2vM/
i wrapped your radio button group in a div and it worked see the fiddle
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<div id="centregroup">
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</div>
</fieldset>
</br>
<hr>
</br>
Button
and here is the css
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#centregroup
{
text-align:center;
}
See screeshot.
U can group your radio buttons inside a div with fixed width and height:
<fieldset data-role="controlgroup" data-type="vertical" style="text-align: center">
<div class="centerRadio">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">A</label>
<input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">B</label>
</div>
</fieldset>
CSS:
.centerRadio
{
width: 80%; margin: 0 auto;
}
DEMO
I want to adjust the appearance on same controls on the website which I am working on, but it seems that is not going good.
I want to use CSS to properly align the controls.
I want to have the checkbox and the label aligned left and then little bit room, then textbox is coming.
Also I want all the textboxes to be aligned same vertically.
How can I do that with css without using tables.
Thanks in advance for your help, Laziale
CSS
div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}
HTML
<div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
Seriously, for you need, you should use tables. you'll have a lot more html and CSS trying the achieve this anyway.
The whole drive to not use tables in Html is for layout of pages and such where you may want to rearrange your page layout (move things around) using just CSS. but I doubt you'd want to rearrange the way your form is laid out.
Simplest way: Specify a width and float:left for the input containers (labels) http://jsfiddle.net/tCcff/2/
<style type="text/css">
label {
float: left;
width: 8em;
}
label.text {
width: 7em;
}
</style>
<div>
<label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Label here </label> <label class='text'>Text Three-----</label> <input type='text' />
</div>
This article is a good reference for CSS based form layout: http://articles.sitepoint.com/article/fancy-form-design-css/3
I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:
<form id="sg1">
<label for="member1">member 1</label>
<input name="member1" id="member1" value="jack" />
<label for="member2">member 2</label>
<input name="member2" id="member2" value="carter" />
<label for="member3">member 3</label>
<input name="member3" id="member3" value="jackson" />
<label for="member4">member 4</label>
<input name="member4" id="member4" value="tielk" />
</form>
Trying to get:
[input box 1] [input box 2]
label 1 label 2
etc, with all elements.
A quickly whipped up example that works:
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<form id="sg1">
<label>member 1 <input name="member1" id="member1" value="jack" /></label>
<label>member 2 <input name="member2" id="member2" value="carter" /></label>
<label>member 3 <input name="member3" id="member3" value="jackson" /></label>
<label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>
Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.
Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:
<div class="pair">
<input type="text" name="foo" value="bar" /><br />
<label for="foo">shabba</label>
</div>
<div class="pair">
…
</div>
CSS:
div.pair {
float:left;
}
You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.
You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.
The simplest way is to put the label beneath the input on the html:
<form id="sg1">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</form>
Then you can wrap each input/label pair with a div, and set the div like so:
<form id="sg1">
<div class="wrap">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
</div>
<div class="wrap">
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
</div>
<div class="wrap">
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
</div>
<div class="wrap">
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</div>
</form>
#sg1 div
{
clear: both;
float: left;
}
Next you can put
#sg1 label
{
float: right;
}
input
{
display:block;
}