How to right-align form input boxes? - html

I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<input name="declared_first" value="above" />
<br/> <!-- I want to get rid of this -->
<input name="declared_second" value="below" />
</form>
</body>
</html>
I just want the first input to appear above the second input, both on the right hand side.

You can use floating to the right and clear them.
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.
form {
direction: rtl;
}
input {
display: block;
direction: ltr;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Or the modern way, flexbox layout
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>

Try use this:
<html>
<body>
<input type="text" style="direction: rtl;" value="1">
<input type="text" style="direction: rtl;" value="10">
<input type="text" style="direction: rtl;" value="100">
</body>
</html>

input { float: right; clear: both; }

Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<p>
<input name="declared_first" value="above" />
</p>
<p>
<input name="declared_second" value="below" />
</p>
</form>
</body>
</html>

To affect ONLY text type input boxes use the attribute selector
input[type="text"]
This way it will not affect other inputs and just text inputs.
https://www.w3schools.com/css/css_attribute_selectors.asp
example, use a div and give it an idea to refer to:
#divEntry input[type="text"] {
text-align: right;}

Use some tag, to aligning the input element.
So
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
{
width: 500px;
height: 250px;
display: table;
text-align: right;
}

I answered this question in a blog post: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/
It refers to this fiddle: https://jsfiddle.net/wscherphof/9sfcw4ht/9/
Spoiler: float: right; is the right direction, but it takes just a little more attention to get neat results.

Try use this:
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}

Related

Line break after input using only css

I got a html with a lot of label + input
<label>Application</label>
<input id="ApplicationName" />
...
<label>Foo</label>
<input id="Foo" />
...
<label>Junk</label>
<input id="Junk" />
I force a width to add some consistency
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
With this style it's a bit better but the flow still breaks "anywhere" depending on the width of container. How can I make the label + input to be a block ?
(Without enclosing both of them in a container)
Another acceptable solution would be to
add a virtual carriage return after each input or
before each label.
I didn't succeed to put it after because the input tag doesn't support after.
Neither can I put it before because
label::before {
content: "\A";
white-space: pre;
}
doesn't mix well with label{display:inline-block}
label {
display:inline-block;
width:10em;
}
input {
width:10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
resize the window to exhibit unwanted behaviour
You can use a mixture of floating and clearing, a bit old school but seems to work for the structure:
label {
display: block;
width: 10em;
float: left; /* makes the element act like inline block */
clear: left; /* clears any left floats so before so this should start on new line */
}
input {
width: 10em;
float: left;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Or you could just give a width to your parent container to force the content onto the next line:
div {
width: 21em;
}
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Option #1, CSS-only
If you really can't edit the HTML, then you can apply white-space: pre; and content: "\a"; to the label:before. See this updated JSFiddle.
label:before {
content: "\a";
white-space: pre;
}
<label>Application</label>
<input id="ApplicationName" />
<label>Foo</label>
<input id="Foo" />
<label>Junk</label>
<input id="Junk" />
Option #2, HTML-only
A better solution could be to just wrap the <input>s in the <label>s (another benefit of this, is that you don't need to use the for attribute to link each label the the corresponding input!). Here's a working JSFiddle with your code snippet :)
input{
width: 10em;
}
label{
float: left;
clear: left;
}
<label>Application: <input id="ApplicationName" /></label>
<label>Foo: <input id="Foo" /></label>
<label>Junk: <input id="Junk" /></label>

form fields not aligning properly when using CSS table

In the following HTML (also in jsfiddle) I am using CSS tables to align the fields in the form:
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>input, form>div>textarea {
display: table-cell;
}
</style>
</head>
<body>
<form>
<div>
<label for='form-name'>Name:</label>
<input id='form-name' type='text'/>
</div>
<div>
<label for='form-email'>Email:</label>
<input id='form-email' type='email'/>
</div>
<div>
<label for='form-comments'>Comments:</label>
<textarea id='form-comments'></textarea>
</div>
<div>
<input type='submit'/>
<input type='reset'/>
</div>
</form>
</body>
</html>
My questions are:
why does the textarea cell have a greater width than that of the cells above it?
why don't the two button input fields reside on the same row?
update
Here's an updated jsfiddle based on the accepted answer.
Give width: 100%; to form>div>input, form>div>textarea and following css:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 48%;
}
will make it as per your expected output.
Working Fiddle
Attached a snippet.
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>div {
display: table-cell;
}
form>div>div>input {
width: 100%;
}
form>div>div>textarea {
width: 100%;
}
form
</style>
</head>
<body>
<form>
<div>
<label forName='form-name'>Name:</label>
<div>
<input id='form-name' type='text' />
</div>
</div>
<div>
<label forName='form-email'>Email:</label>
<div>
<input id='form-email' type='email' />
</div>
</div>
<div>
<label forName='form-comments'>Comments:</label>
<div>
<textarea id='form-comments'></textarea>
</div>
</div>
<div>
<input type='submit' />
<input type='reset' />
</div>
</form>
</body>
</html>
all 4 div have the same width in your fiddle.
use float's on the submit and reset input's to display them on the same row
Try this:
HTML
<table>
<form>
<tr>
<td><label for='form-name'>Name:</label><br>
<input id='form-name' type='text'/></td>
</tr>
<tr>
<td><label for='form-email'>Email:</label><br>
<input id='form-email' type='email'/></td>
</tr>
<tr>
<td><label for='form-comments'>Comments:</label><br>
<textarea id='form-comments'></textarea></td>
</tr>
<tr>
<td><input type='submit'/>
<br>
<input type='reset'/></td>
</tr>
</form>
</table>
CSS
form {
display: table;
width: 200px;
}
form div {
display: table-row;
}
form div label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form div input, form div textarea {
display: table-cell;
}
div{
border:1px solid black;
}
table td input, table td textarea{
width: 100%;
}
table td{
width: 150px;
}
JSFiddle:
First a comment about label for:
label forName="form-email
should be written:
label for="form-email
This is quite useful for:
label (text) click -> focus on input field that text is used for.
To answer your questions:
why does the textarea cell have a greater width than that of the cells above it?
It happens because of html element textarea can have rows and cols attributes inside, it has default values if you don't specify it. Check this for example (it would be 50% less in size):
<textarea cols="10" rows="5" id='form-comments'></textarea>
Default values are listed here (20 cols, 2 rows):
http://www.w3schools.com/tags/att_textarea_rows.asp
http://www.w3schools.com/tags/att_textarea_cols.asp
If you would like to override it just put width: 100% to fill width.
Why don't the two button input fields reside on the same row?
You're using table displays on divs and your styles aren't specific enough, you're making general div and input styles and that's your problem.
To fix this, omit last div that wraps your buttons so you just have:
<input type='submit'/>
<input type='reset'/>
And remove display: table from your "form" styles.
https://jsfiddle.net/n3145f60/13/

How can I layout text and inputs on a form to fit a specific width (justified)?

I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}

Align select and input

Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
​
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.

Layout of fieldset inconsistent in ie7

I am trying to use a fieldset legend as a label for a group of radio buttons. The HTML and CSS I have works fine in IE8&9, firefox and chrome. In IE7 the label appears over the radio buttons. In all other browsers the label appears to the left of the buttons. I am happy to add a conditional stle for IE7 but I cant figure out what would make this work.
The problem is replicated in the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.radiolegend {
display: inline; float: left; width: 300px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left;
}
</style>
</head>
<body>
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<input type="radio" name="r1" style="display: inline;" id="r1">
<label for="r1">r1</label>
<input type="radio" name="r2" style="display: inline;" id="r2">
<label for="r2">r2</label>
</fieldset>
</form>
</body>
</html>
If you want ie7 conditional, then do this:
CSS
.radiolegend {
float: left; width: 150px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left; width:300px;
}
.cb{
float:right;
margin-top:-20px;
}
HTML
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div>
<div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div>
</fieldset></form>
Now, you need to change styling for the rest of the browsers too. Just remove margin-top:-20px; from .cb. You were wrapping text in <input> tag, it's not correct. <input> has to be self closing