In the below code my span is showed at the right side of the text box I want it below the text box. Please let me know what can be done?
<fieldset class="no_border">
<div class="float_left">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
#nominee_details span {
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
.float_left {
float:left;
width:33%;
}
other spans without DIV
<fieldset class="no_border">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</fieldset >
JS Fiddle
I actually have 2 situation
1st where are inside fieldset and div as shown above and
2nd where are inside fieldset
span for 1st case are not getting rendered below text box
span for second are displayed properly
if you see my jsfiddle you shall understand what i am trying to explain
http://jsfiddle.net/dwWww/5/
Are you looking for this?
.float_left span {
display: block;
}
If you can use jquery, First you set display: none;
$(".float_left span").css("display","none");
But when you detect an error just do:
$(".float_left span").css("display","block");
Or just:
.addClass() //set display block
.removeClass() //set display none
Or:
$(".float_left span").text("Error!!");
and
$(".float_left span").text('');
Update:
.float_left span, #nominee_details span {
display: block;
}
http://jsfiddle.net/M8XQ6/
span is an inline element, you may want to use a block level element like div or p or set display:block to the span or put a <br/> just before the span.
Related
jQuery Mobile automaticly adds this to an < input >. How can I override it and remove the top margin from the div?
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput">
</div>
And css of the div looks like:
.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
-moz-box-sizing: border-box;
display: block;
line-height: 1.4em;
outline: 0 none;
padding: 0.4em;
width: 100%;
}
DEMO
You may write new CSS for input with parent containers class name so that it will take higher priority
HTML
<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input id="myinput" />
</div>
</div>
CSS
.wrap .ui-input-text input{
border:1px solid red; /*desired style*/
margin-top:0;
}
Starting with jqm 1.4 you should use class="ui-field-contain" instead of data-role="fieldcontain" around your <label> and <input> tags. To adjust the vertical spacing of each of the field sets you can override the margins of the <div> tag using a simple additional style property:
<div class="ui-field-contain" style="margin-top:2px;margin-bottom:2px;">
<label for="field1">Field label:</label>
<input type="text" name="field1" data-mini="true" id="field1" />
<div>
I'm new to CSS layouts and have hit a problem.
This is what I currently have. http://jsfiddle.net/EPp5C/5/
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
}
#login ul {
margin: 0;
padding: 0;
}
#login ul li {
margin: 0;
padding: 0;
display: inline-block;
font-size:14px;
color: white;
}
There are 2 parts to this question.
First part:
I would like the list items to be displayed as
Username: Password:
[textfield] [texfield]
so have the textfields under the corissponding username and password.
http://jsfiddle.net/EPp5C/6/
I added a <br> with a class of clear. I then gave this class the attributes of clear:both;. This will push the floats onto a new line. If you want to line them up, add a width to the elements. If you want to move them further up the page, add a margin-top to the parent elements.
<ul>
<li>Username: </li>
<li>Password: </li>
<br class="clear" />
<li><input type="text" name="username" /></li>
<li><input type="text" name="password" /></li>
</ul>
.clear { clear:both; }
I think you should change your html.
You do not need to put this form info in a ul. In fact, that would be semantically incorrect.
Here is what I suggest:
HTML
<div id="login">
<form>
<label>Username:</label><label>Password:</label>
<br />
<input type="text" name="username" />
<input type="text" name="password" />
</form>
</div>
CSS
label{
display:inline-block;
width:170px;
color: #fff;
}
Also, to put it inside the colored div as much as possible, I used margin-top on the #login
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
**margin-top:-30px;**
}
Demo
http://jsfiddle.net/EPp5C/9/
i suggest you to put the form child inside span tag
working fiddle
HTML
<div id="login">
<form>
<span>Username:<input type="text" name="username" /></span> 
<span>Password:<input type="text" name="password" /></span>
</form>
</div>
reference:The <span> tag is used to group inline-elements in a document.
CSS (refer complete CSS at the fiddle)
span{
margin-right:10px;
display:inline-block;
width:220px;
color: #fff;
}
hope it can help
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.
This question already has answers here:
How to align input forms in HTML
(17 answers)
Closed 2 years ago.
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
http://jsfiddle.net/T6zhj/1/
Using display table-cell/row will do the job without any width needed.
The html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
JSFiddle
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
in my case i always put these stuffs in a p tag like
<p>
name : < input type=text />
</p>
and so on and then applying the css like
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
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>