I have horizontally side by side: labels and text areas; labels and select. I would like to have it such that:
The select input is vertically centered with the label for that select. Say for example the select label takes up 5 lines then the select should be lined up so it appears to be on the same vertical level as teh 3rd line in the label side by side. If the label text is one line high then the label and the select are vertically on the same level. If the label text is 2 lines high then the select should appear to be on a level between the two lines.
For text areas the label text is vertically centred with the text area and the text area is vertically centered with the label. Say the text area is 5 lines high and the label is one line hight then the label should appear to be level with the 3rd line in the text area. Say the text area is 2 lines high and the label is 4 lines high then the text area should line level with the middle 2 lines in the label.
For text box similar to item 1, with the text box lining up with middle line in the label.
HTML
<div class="fieldSet"><fieldset>
<p>
<label class="field" for="name">Name:</label>
<input id="name" type="text" name="name" class="textbox" >
</p>
<p>
<label class="field" for="life">Life Number:</label>
<input id="life" type="text" name="life" class="textbox" style="width:85px;">
<label class="field" for="annual">Annual Blah Blah Blah Blah Blah Blah Blah Blah Blah Number:</label>
<input id="annual" type="text" name="annual" class="textbox" style="width:85px;">
<label class="field" for="maleFemale" style="width:125px;">M/F:</label>
<input id="maleFemale" type="text" name="maleFemale" class="textbox" style="width:40px;">
</p>
<p>
<label class="field" for="runYesNo">Running, Yes/No?:</label>
<select name="runYesNo" id="runYesNo">
<option value="?" selected>Yes/No?</option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</p>
<p>
<label class="field" for="predMins">Predicted 5km blah blah blah blah blah blah:</label>
<input id="predMins" type="text" name="predMins" class="textbox" style="width:85px;">
<label class="field" for="predSecs">Seconds:</label>
<input id="predSecs" type="text" name="predSecs" class="textbox" style="width:85px;">
</p>
<p>
<label class="field" for="helpOut">Blah Blah Blah Blah are you Available to Assist / Help Out / Officiate / Steward on the Night?, Yes/No:</label>
<select name="helpOut" id="helpOut">
<option value="?" selected>Yes/No</option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</p>
<p>
<label class="field" for="comments">Comments:</label>
<textarea id="comments" name="comments" ROWS=10 WRAP="SOFT" >Comments go here.......</textarea>
</p>
</fieldset></div>
CSS
form{
display: block;
width:800px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0;
}
div.fieldSet {
width:798px;
margin-left: auto;
margin-right: auto;
}
fieldset{
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
}
legend{
width: 100%;
padding: 0px;
text-align: center;
}
label.field{
text-align: right;
width: 190px;
float:left;
vertical-align: middle;
}
input.textbox{
width: 560px;
float: left;
height: 25px;
vertical-align: middle;
}
fieldset p{
clear: both;
vertical-align: middle;
text-align : left;
}
textarea {
width:560px;
}
select {
width:270px;
display:block;
float: left;
}
I would appreciate advise on how to achieve the layout that I am looking for.
Thank you for reading this.
Try this >>>>>>>Better-vertical-Alignment
css
label.field{
text-align: right;
width: 190px;
float:left;
vertical-align: middle;
line-height:25px;
}
so for the vertical alignment play with line-height:25px with vertical-align:middle!
Related
Few hour ago I have asked question that for to align 2 text boxes in line.
But now problem is text boxes are aligned and I have put select list in side of each text box.
but problem is that when I change the label or text before text box all formation disturbed and it's not aligning in same format.
I want that whatever the text I write before text box, the position of text box should not change. (ONE TEXT BOX SHOULD BE AT SAME POSITION UNDER ANOTHER ONE)
fiddle demo
code :
.divkl {
display: inline;
margin: 20px;
}
.blockl{
width: 100%;
display: block;
padding:3px;
}
.txt_prd_add
{
width:100px;
border-radius:0px !important;
margin-left:10px;
margin-top:4px;
}
.select_prd
{
width:85px;
margin-top:4px;
}
Wrap all of the labels in <label></label> and then apply a fixed width and display: inline-block to the label via CSS. If you want to prevent the elements from wrapping when the browser is resized add white-space: nowrap; to .block1 and .divk1
HTML
<div class="blockl">
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Color</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
<div class="blockl">
<div class="divkl">
<label>Size</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
<div class="divkl">
<label>Type</label>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</div>
</div>
CSS
label{
width: 50px;
display: inline-block;
}
.divkl {
display: inline;
margin: 20px;
white-space: nowrap; /* Prevents wrapping */
}
.blockl{
width: 100%;
display: block;
padding:3px;
white-space: nowrap; /* Prevents wrapping */
}
JS Fiddle: http://jsfiddle.net/u7aTD/7/
DEMO
<label class="title">Material</label>
.title {
display: inline-block;
width: 80px;
}
Demo: http://jsfiddle.net/abhitalks/u7aTD/6/
You would better wrap your text in labels, e.g.:
<div class="divkl">
<label>Material</label>
<input type="text" class="txt_prd_add">
...
And, then apply css to the labels, e.g.:
label { display: inline-block; width: 10%; }
.txt_prd_add { width:10%; ...
.select_prd { width:10%; ...
The problem you are having is with the widths. It would be better if you first apply widths in percentages to check it out, and then tweak it according to your design.
You can use tables insted of divs , as to get proper aling.`
Material
GB
MB
GHz
Color
GB
MB
GHz
<tr class="divkl"><td>Size</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
<tr class="divkl">
<td>Type</td>
<td>
<input type="text" class="txt_prd_add">
<select class="select_prd">
<option>GB</option>
<option>MB</option>
<option>GHz</option>
</select>
</td>
</tr>
</table>
</div>`
I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button.
The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue
I have put it here http://jsfiddle.net/zrhB6/3/
The Css
input[type=text],input[type=password]{
display: block;
height: 3em;
width: 100%;
}
.btn {
background-color:#c1d82f;
border:3px solid #97a34b;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
}
HTML
<div class="grid-container">
<div class="grid-50 login">
<h3>Login</h3>
<form class="grid-100">
<input type="text" name="loginEmail" placeholder="Email"/>
<input type="password" name="loginPassword" placeholder="pass"/>
<input type="submit" name="loginSubmit" class="btn"/>
</div>
<div class="grid-50 login">
<h3>Register</h3>
<form">
<input type="text" name="registerName" placeholder="Name"/>
<input type="text" name="registerEmail" placeholder="Email"/>
<input type="password" name="registerPassword" placeholder="pass"/>
<input type="submit" name="registerSubmit" class="btn"/>
</div>
</div>
I'm using unSemantic grid, but that shouldn't be a issue I think
To both CSS selectors, add:
box-sizing:border-box;
The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.
I want a row of blocks from left to right, followed by a block underneath.
Here is a picture of what I would like to see rendered in the browser.
I need to do all positioning by CSS, not by tables. Here is my HTML and my CSS...
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>
<body>
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>
<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>
... and here is the content of demo.css...
fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}
fieldset.radio input
{
clear: both;
float: left;
width: auto;
}
input
{
display: block;
width: 15em;
}
label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}
label.first
{
padding-top: 1em;
}
The way I read it, should be getting the desired result with this code. But I am not. Here is what renders instead ....
What changes do I need to make to my html/css in order to get the stated desired result?
A way without clearing is:
form { overflow: hidden; }
I usually create a class called floatbox and use this on every container which contains floating elements
.floatbox { overflow: hidden; }
the matching html then is
<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>
you need to make the <hr /> element clear the floats. hr { clear: left; }
Add:
hr {
clear: left;
}
to your style sheet to clear your floats.
You could use the ole' dummy clearing element trick:
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
<div style="clear:both"> </div>
</form>
This ensures your form actually occupies as much space as the elements inside it.
The problem with simply clearing the hr is that the form has zero width and height, which could be problematic if you're applying styling to the form as well.
I have been spending the entire day trying to figure out how I can create big forms and at the same time maintain a proper design of the layout.
Currently I'm using formee (style and 960 grid system), which I have tried to turn into an inline form rather than row based (default). Unfortunately it gets really messy and looks horrible.
To give an visual understanding of what I want to archieve I have created a mockup.
How can I solve issue?
Here is such an example: http://jsfiddle.net/PhilippeVay/gaegv/2/
HTML:
<fieldset class="group">
<legend>First logical group of items</legend>
<div class="col">
<p class="text">
<label for="label1">Field label 1</label>
<input type="text" id="label1" />
</p>
<p class="text">
<label for="label2">Field label 2</label>
<input type="text" id="label2" />
</p>
<p class="text">
<label for="label3">Field label 3</label>
<input type="text" id="label3" />
</p>
</div>
<div class="col">
<p class="text">
<label for="label4">Field label 4</label>
<input type="text" id="label4" />
</p>
<p class="text">
<label for="label5">Field label 5</label>
<input type="text" id="label5" />
</p>
<p class="text">
<label for="label6">Field label 6</label>
<input type="text" id="label6" />
</p>
</div>
</fieldset>
<div class="group fieldset-like">
<p class="textarea">
<label for="label7">Field label 7</label>
<textarea id="label7">some text (test font-size)</textarea>
</p>
</div>
<div class="group">
<fieldset class="col">
<legend>Third legend</legend>
<p class="text">
<label for="label8">Field label 8</label>
<input type="text" id="label8" />
</p>
<p class="text">
<label for="label9">Field label 9</label>
<input type="text" id="label9" />
</p>
<p class="text">
<label for="label10">Field label 10</label>
<input type="text" id="label10" />
</p>
</fieldset>
<fieldset class="col">
<legend>Fourth legend</legend>
<p class="text">
<label for="label11">Field label 11</label>
<input type="text" id="label11" />
</p>
<p class="text">
<label for="label12">Field label 12</label>
<input type="text" id="label12" />
</p>
<p class="text">
<label for="label13">Field label 13</label>
<input type="text" id="label13" />
</p>
</fieldset>
</div>
CSS:
.col {
float: left;
width: 36%;
padding: 2%;
background: #EEE;
}
.col + .col {
margin-left: 10%;
}
.col:after {
content: "";
display: block;
clear: both;
}
fieldset,
.fieldset-like {
margin: 0;
padding: 0;
border: 1px solid darkgreen;
}
.group {
margin: 20px 10px; /* must come after .fieldset-like rule */
}
label {
font-weight: bold;
cursor: pointer;
}
.text { /* because .radio and .checkbox are SO different! */
clear: both;
}
.text label,
.textarea label {
display: inline-block;
width: 39%;
margin-right: 1%;
text-align: right;
background-color: lightgreen;
}
.text input,
.textarea textarea {
display: inline-block;
width: 55%;
border: 1px solid darkgreen;
padding: 4px;
}
.textarea {
width: auto;
padding: 2% 4% 2% 4%;
}
/* label and textarea: also see above */
.textarea label {
width: 14.04%; /* 39% of 36% Yeah I know... */
margin-right: 0.36%; /* 1% of 36% */
background-color: lightgreen;
vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */
}
.textarea textarea {
width: 74%;
}
a class on paragraph allows to style the label according to the nature of the form element (you can't style a preceding sibling - or a parent - according to an element that comes after it in the DOM, in 2012 and in CSS3 at least ;) ).
you can use selector attributes with modern browsers: input[type="text"] but it's longer to write in a Fiddle AND then you must consider text, password and select element in HTML 4.01 and in HTML5 add email, number, tel, etc That'll multiply the length of your selectors. Or you can use a class on a parent to distinguish and group form elements. Former is needed if you're writing a general reset stylesheet for thousands of colleagues, latter is more efficient if you're also the one writing the HTML code.
.group contains 2 .col, it doesn't matter if it's columns in a fieldset or fieldsets in a div.
calculation of a width into an element having a width means multiplication. Draw it on a sheet of paper and write down each width. It'll allow you to not forget about a single one ;)
padding in percentage doesn't seem to work for input. Not sure about that.
widths on select are easier and cross-browser if you add box-sizing:
select {
-moz-box-sizing: content-box; /* Firefox, meet padding ... */
box-sizing: content-box; /* IE8+ */
padding: 4px 6px; /* example */
}
From a UX standpoint form labels that sit to the left of the field have a lower rate of user completion. The reason for this is that users have to read the label, associate the label to the field and then move their eyes back to the left again after completing filling in of the field. This causes minor eye fatigue and mental distraction.
Forms that have the highest rate of completion is when the label is above the field. The second highest is when the label is within the field. This will also give your form a cleaner look and give the impression to the end user that, even though it might be long. It's not a daunting form to complete.
How to position a complex form with multiple fields in line across the screen?
Why are people so hell-bent on avoiding tables?
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
If your form is logically grouped such that a table would be intuitive, please use a table.
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
If you want a fluid form with a variable number columns, then disregard this.
I prefer the slightly-more-semantic way, using a definition list:
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
Then your CSS:
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
Hope that helps.
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
I suggest you blueprint CSS framework. Have a quick look at the demo page.
This is what I usually use when I need to design pretty complex forms.
HTML:
<fieldset> <legend>Consent group</legend> <form> <fieldset class="nolegend"> <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p> <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p> <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p> </fieldset> <fieldset class="nolegend"> <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p> </fieldset> <input type="submit" value="Submit" /> </form></fieldset>
CSS:
body, input, textarea, select { font: 1em Arial, Helvetica, sans-serif;}input, textarea, select { font-size: .8em }fieldset,fieldset legend { background-color: #EEE;}fieldset { border: none; margin: 0; padding: 0 0 .5em .01em; top: 1.25em; position: relative; margin-bottom: 2em;}fieldset fieldset { margin: 0 0 1em 0;}fieldset legend { padding: .25em .5em 0 .5em; border-bottom: none; font-weight: bold; margin-top: -1.25em; position: relative; *left: -.5em; color: #666;}fieldset form,fieldset .fieldset { margin: 0; padding: 1em .5em 0 .5em; overflow: hidden;}fieldset.nolegend { position: static; margin-bottom: 1em; background-color: transparent; padding: 0; overflow: hidden;}fieldset.nolegend p,fieldset.nolegend div { float: left; margin: 0 1em 0 0;}fieldset.nolegend p:last-child,fieldset.nolegend div:last-child { margin-right: 0;}fieldset.nolegend label>span { display: block;}fieldset.nolegend label span { _display: block;}
I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
input fields, by default, are inline. Therefore, you can simply use line them up without Another option if you want them lined up correctly is as follows:
<div id="col1" style="float: left;>
<input type="text" name="field1" />
<br />
<input type="text" name="field3" />
</div>
<div id="col2" style="float: left;>
<input type="text" name="field2" />
<br />
<input type="text" name="field4" />
</div>
I prefer to use fieldset to group all elements and p for each form field.
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>