Looking for an example of checkbox with (centered) label on top of it:
IamALabel
[ ]
I'm using (ASP.NET) MVC 5 if that matters.
I tried couple of simple things but it wouldn't center it:
<div>
<label for="checkbox1"><span></span>IamALabel</label>
<br/>
<input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
</div>
and also:
<div>
<label for="checkbox1" style="display: inline-block; text-align:center"><span></span>IamALabel</label>
<br/>
<input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
</div>
You can use display: table technique:
div {
display: table;
float: left;
margin-right: 15px;
}
label {
display: table-row;
}
#chk {
display: table-row;
width: 100%;
}
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
<div>
<label for="male">IamALabel</label>
<input type="checkbox" id="chk" />
</div>
EDIT
For adding multiple label/checkbox near each other add float: left in div element.
Related
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 am new to CSS and have been trying to create a web form with the radio buttons aligned next to text fields. However, in Firefox the radio boxes look fine, but when I check in Safari the radio boxes are in the middle of the text fields.
The CSS looks like this:
input#answers
{
display: block;
height: 31px;
left: 87px;
position: relative;
top: 0px;
width: 350px;
}
input[type="radio"]
{
display: inline- block;
height: 20px;
left: 249px;
position: relative;
top: -30px;
vertical-align: middle;
}
and the HTML like this:
<form id="quizCreator" name="quizCreator" method="post" action="quiz.maker.php">
<label><span><img src="images/quizcreatorText.ques.png" hspace="79px" vspace="70px" class="titles" /></span> <br />
<input type="text" name="question" id="question" />
</label>
<label><img src="images/quizcreatorText.ans.png" hspace="79px" vspace="70px" class="titles" id="ans" /> <br />
<input type="hidden" name="creator" value="myform" />
<br />
<input type="text" name="answer1" id="answers" />
</label>
<label>
<input type="radio" name="radio" id="radio1" value="radio1" />
</label>
<label>
<input type="text" name="answer2" id="answers" />
</label>
<label>
<input type="radio" name="radio" id="radio3" value="radio2" />
</label>
<label>
<input type="text" name="answer3" id="answers" />
</label>
<label>
<input name="radio" type="radio" class="radio" id="radio3" value="radio3" />
</label>
<label>
<input type="text" name="answer4" id="answers" />
</label>
<label>
<input name="radio" type="radio" id="radio4" value="radio4" />
</label>
<span><input type="image" src="images/quiznameText.next.png" name="nextPage" id="nextPage" class="nxtbutton" /></span>
</form>
I've tried using relative positioning and margins, but while it fixes the problems in Safari, Firefox then looks wrong. Is there a way to make them both work as I want with a single set of code? (And what about MSIE?)
You should not be using relative positioning for this.
The proper structure is something like this (not sure if you want the text before or after):
<div class="answers">
<ul>
<li><label>your text</label><input type="radio" /></li>
...repeat...
</ul>
</div>
CSS:
.answers ul, .answers li {
list-style-type:none;
margin:0;
padding:0;
}
.answers li {
clear:both
}
.answers label {
display:block;
float:left;
width:100px;
}
.answers input {
display:block;
float:left;
}
I have the following form. How do I create this look without <table>. Thanks
<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>
This enough for basic styling:
input {
display: block;
}
label {
width: 100px; /* whatever value you wish */
float: left;
}
You can see how this works at http://dabblet.com/gist/2794359
.label {width:30px;} certainly won't do it. First of all, because when you write .label, that selects elements having a class called label. Secondly, even if you didn't use the dot, the label element is by default an inline element, so setting a width on it is useless if you don't give it a display: block as well (floating it also does the trick).
You can use this styles:
CSS markup:
.divContainer
{
display: table;
}
.divRow
{
display: table-row;
}
.divColumn
{
display: table-cell;
}
HTML markup:
<div class="divContainer">
<div class="divRow">
<div class="divColumn">
<label for="firstname">First Name</label>
</div>
<div class="divColumn">
<label for="lastname">Last Name</label>
</div>
</div>
</div>
Sample HTML:
<div id="container">
<div class="row">
<div>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" name="firstname" id="firstname"/>
</div>
</div>
<div class="row">
<div>
<label for="lastname">Last Name</label>
</div>
<div>
<input type="text" name="lastname" id="firstname"/>
</div>
</div>
<div/>
CSS:
.row {
width: 100%;
}
.row > div:first-child {
width: 20%;
float: left;
}
.row > div:last-child {
float: left;
width: 80%;
}
jsFiddle: http://jsfiddle.net/Q4g2u/1/
Apart from religious-like issues, there is no reason to format tabular data such as a form without using table markup. But if you must, the technique described in the answer of Luis Sánchez comes closest – but it is just simulating tables in CSS, with more limited browser support.
I have the following:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
I want to make the input field appear below the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?
Set
display: block;
on either the label or the input.
Note: As pointed out in a comment, you'd also need to remove the float style from your containing div if you want the divs to appear below each other.
Why not remove the float on the DIV and make the LABEL a block?
<div style=" padding-right: 1%;">
<label class="editor-label" style='display:block;' for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
Demo : http://jsfiddle.net/h7mnJ/
You can put the label and the input in their own divs or set each to display: block in CSS.
put label inside a div:
<div style="float: left; padding-right: 1%;">
<div>
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<div>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
See the results at: http://jsfiddle.net/uUEn8/
Also you can set display:block on either label or input.
You can put display: block on the label:
.editor-label {
display: block;
}
Example: http://jsfiddle.net/ambiguous/b5UrP/
Or you could float both the label and input to the left and put clear: left on the input:
.editor-label {
float: left;
}
.editor-field {
clear: left;
float: left;
}
Example: http://jsfiddle.net/ambiguous/hxhCx/
As all of the CSS solutions have been exhausted, here's a HTML solution with the <br /> element:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<br />
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
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;
}