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.
Related
I would like to use a radio input to make a div visible when it's selected.
Here's what I've got but it doesn't work.
HTML:
<input type="radio" name="menu" id="btn_commandprompt" value="1"></input>
<label for="btn_commandprompt"">
<div id="btn_commandprompt_design"></div>
</label>
<div id="commandprompt"></div>
CSS:
#commandprompt{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#btn_commandprompt:checked ~ #commandprompt{
display: block;
}
Thanks
I have modify your code. its now working...
<style>
#commandprompt{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
#btn_commandprompt:checked ~ #commandprompt{
display: block;
}
</style>
<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1"> Show Me</input>
<input type="radio" name="menu" id="btn_acceuil" value="1"> Hide Me</input>
<div id="btn_commandprompt_design"></div>
<div id="commandprompt">ooh!!</div>
</body>
this should work
<body>
<input type="radio" name="menu" id="btn_commandprompt" value="1" onclick="show()"> Click Me</input>
<div id="btn_commandprompt_design"></div>
<div id="commandprompt" style="display:none">Show Me</div>
</body>
<script>
function show(){
document.getElementById("commandprompt").style.display = 'block';
}
</script>
It would work if you put something inside the Div. Your code is correct, just add a paragraph inside your Div for example and try it again.
I'm creating a layout using column-count and -webkit-column-count but I found an issue that appears multiple times.
As you can see from this image, Chrome 45 (not happening in FF) breaks elements' border, which is very strange and quite annoying. This is a bit the code where the break happens (but I don't know why it is not happening here, only difference are fonts, and absence of Mayers css reset):
body {
line-height: 1.5;
}
form {
-webkit-column-count: 2;
column-count: 2;
}
label {
display: block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-top: 0.625em;
}
input {
border: 1px solid green;
border-radius: 4px;
padding: 0.25em 0.5em;
}
label>span:first-child {
width: 5em;
display: inline-block;
}
<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
<label>
<input type="checkbox">
<span>Mobile</span>
</label>
<label>
<input type="checkbox">
<span>Animate</span>
</label>
<label>
<span>Frecuency:</span>
<input type="number">
</label>
<label>
<span>Exclusions:</span>
<input type="text">
</label>
</form>
But it didn't work. Could you give any enlightenment?
Although it is not very clear (without markup) in your question, it seems your form elements (labels and inputs) are not wrapped in their respective containers and are on their own.
You are preventing break on labels only, and hence the inputs are not bound by that rule. This is the reason you are facing that problem.
Best solution would be to wrap your label-input sets in their own containing divs and apply break-inside: avoid on those divs.
Example:
* { box-sizing: border-box; }
form { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
form > div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }
form label, form input { display: inline-block; margin: 4px 0px; }
form input[type=text] { width: 50%; }
<form>
<div>
<input id="chk1" type="checkbox" /><label for="chk1">Mobile</label>
</div>
<div>
<input id="chk2" type="checkbox" /><label for="chk2">Animated</label>
</div>
<div>
<label for="txt1">Input 1:</label><input id="txt1" type="text" />
</div>
<div>
<label for="txt2">Input 2:</label><input id="txt2" type="text" />
</div>
<div>
<label for="txt3">Input 3:</label><input id="txt3" type="text" />
</div>
<div>
<label for="txt4">Input 4:</label><input id="txt4" type="text" />
</div>
<div>
<label for="txt5">Input 5:</label><input id="txt5" type="text" />
</div>
<div>
<label for="txt6">Input 6:</label><input id="txt6" type="text" />
</div>
</form>
Fiddle to see the effect of resizing: http://jsfiddle.net/abhitalks/jd7v0n8e/
Note: Last style rule in the above example is to prevent overflow of the inputs when the the available space is less than their default width.
Edit:
(after Op's comment)
Now that you have provided your markup, this arrangement should also work. As long as you are sure that all inputs are properly wrapped inside those labels.
See this snippet:
* { box-sizing: border-box; }
form{
-webkit-column-count: 2;
column-count: 2;
}
label {
display: block; margin: 2px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
input {
border: 1px solid green;
width: 50%;
}
<form>
<label>This: <input type="text" /></label>
<label>This is long: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This is much longer than before: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
<label>This: <input type="text" /></label>
</form>
And also this fiddle: http://jsfiddle.net/abhitalks/38wjpu28/3/
It seems that there must be something else going on in your markup besides what you have shown in your question.
Note 2: I would recommend going with a wrapping div and keeping the label and input separate. This would allow you greater control in case you need to change the layouts later on. (e.g. when you need to put label on top of input instead of side by side)
I have this HTML:
<div>
<label>field 1</label>
<input type="text">
<label>field 2</label>
<input type="text">
<label>field 3</label>
<input type="text">
</div>
How can I make a label-input pair use 100% of the width with CSS ? (and each pair be on their own line)
I used to put the label-input pair in a sub div of their own. But I'm wondering if there's a way to do it with just CSS. (I'm using compass to generate the CSS).
For bonus points .. can you have the same CSS make the label a line above on mobile (small screen) devices.
Thanks heaps.
Sort of like this? http://jsfiddle.net/m6pZH/13/
I suggest you modify your HTML slightly, as it will be hard (if even possible) to properly maintain your current HTML properly:
<ul>
<li>
<label>field 1</label>
<input type="text" />
</li>
<li>
<label>field 2</label>
<input type="text" />
</li>
<li>
<label>field 3</label>
<input type="text" />
</li>
</ul>
CSS:
li {
display: block;
overflow: auto;
}
li > label {
float: left;
}
li > input {
width: auto;
float: right;
}
Try this:
div label, div input {
display: block;
}
displaying elements on block puts them on their own line and makes them a block element.
Edited content:
div { width: 600px }
div label { float: left; width: 200px; }
div input { float: right: width: 390px; }
Try this.
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.
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>