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>
Related
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
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.
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.
I need to layout some input fields and their layers on a grid (or like a table I guess) with
lable input label input
label input label input
Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is
label input label input
label logerinput label input
How do I line up the second set of labels and there inputs?
I've made two classes for the labels
#dpi_form label {
display: inline-block;
width: 150px;
margin-left: 20px;
}
#dpi_form .right-label {
display: inline-block;
width: 150px;
margin-left: 220px;
}
and the associated controls are
<label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
<label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
within a div.
I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.
I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.
Any clues please?
Peter.
Despite my comment about using tables on your question, this is how I would do it.
CSS:
label,
input {
display: block;
}
label {
padding: 4px 0 0;
}
.labels1 {
float: left;
width: 80px;
}
.labels2 {
float: left;
width: 80px;
}
.inputs1 {
float: left;
width: 200px;
}
.inputs2 {
float: left;
width: 200px;
}
HTML:
<div class="labels1">
<label for="input1">Input 1: </label>
<label for="input2">Input 2: </label>
<label for="input3">Input 2: </label>
</div>
<div class="inputs1">
<input type="text" value="" name="input1" id="input1" />
<input type="text" value="" name="input2" id="input2" />
<input type="text" value="" name="input3" id="input3" />
</div>
<div class="labels2">
<label for="input4">Input 4: </label>
<label for="input5">Input 5: </label>
<label for="input6">Input 6: </label>
</div>
<div class="inputs2">
<input type="text" value="" name="input4" id="input4" />
<input type="text" value="" name="input5" id="input5" />
<input type="text" value="" name="input6" id="input6" />
</div>
Then you can change the labels and inputs classes to the width you want.
Although I still think tables are easier because then you don't have to worry about setting widths yourself; you also don't have to worry about vertical alignment with tables.
use following styles.
for parent container
display: table;
for row container
display: table-row;
for cell container
display: table-cell;
example
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
<div>
<div style="display: table-cell;">
lable
</div>
<div style="display: table-cell;">
input
</div>
<div style="display: table-cell;">
label input
</div>
</div>
</div>
Use a table, that's what they are for.
I would suggest using a table or for a pure CSS solution maybe the 960 grid system 960.gs
I would use floats. Here's a jsfiddle showing how I would do it:
http://jsfiddle.net/pSsap/
I'll reproduce the code below.
With html like this:
<form class="grid">
<section>
<label for="wind">wind</label>
<span class="field"><input id="wind" name="wind" type="input" class="regular"></span>
<label for="earth">earth</label>
<span class="field"><input id="earth" name="earth" type="input" class="regular"></span>
</section>
<section>
<label for="fire">fire</label>
<span class="field"><input id="fire" name="fire" type="input" class="long"></span>
<label for="air">air</label>
<span class="field"><input id="air" name="air" type="input" class="regular"></span>
</section>
</form>
And css like this:
form.grid section {
clear: both;
}
form.grid section label, form.grid section span.field {
display: block;
float: left;
}
form.grid section label {
width: 50px;
}
form.grid section span.field {
width: 150px;
}
input.regular {
width: 100px;
}
input.long {
width: 140px;
}
Solutions:
Use a list: <ol> or <ul>
Set a width for that list: (in the example, 960px is the width of the <ul>)
Float the lists: <li> and set a width to limit its floating point: (in the example, 320px is the set width)
If you want to have a consistent alignment with the <label> and <select> pairs, set a width to the <label> (make sure you set it as a block-level element first: in the example, the <label> was set to 160px)
Make sure to clear (clear: left) any elements following this list (<ul>) used.
The Markup:
<ul>
<li>
<label for="req_retailer_index_fld">Select the retailer*:</label>
<select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_region_index_fld" class="right-label">Select the region*:</label>
<select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_customer_type_index_fld">Select the customer type*:</label>
<select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
<li>
<label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label>
<select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content">
<option>item 1</option><option>item 2</option>
</select>
</li>
</ul>
The CSS
ul {
background: #EEE;
width: 960px;
}
li {
background: #FFC0CB;
float: left;
list-style: none;
width: 320px;
}
label {
display: inline-block;
width: 160px;
}
The result is that, the list will just drop when the <ul> can't contain it any longer (since you have set a width in it). On the other hand, the width of the <li>s will consistently make them align to each other, while being floated.