I have a simple form that consists of 2 textboxs. I'm just trying to make the form appearing in the middle of the page. There are no any extra elements in the page. By using align="center" the elements does move to the center but it's not the case for vertical-align:middle?
<html>
<body style="vertical-align: middle;">
<form>
<div align="center" style="vertical-align: middle;">
<h1>blabla</h1>
<label>
<span>Username: </span><input id="userName" type="text" name="userName" />
</label><br/>
<label>
<span>Password: </span><input id="passWord" type="password" name="passWord" />
</label><br/>
<input type="button" value="Login" />
</label>
</div>
</form>
</body>
</html>
Use the following CSS, it centers the content both vertically and horizontally.
You need to set the html/body to height:100%, then set the body, or the parent to display:table. After that, set the child to display:table-cell, and vertical-align:middle. That will take care of the vertical alignment. In order to center horizontally, use margin:0px auto;, and set a width on the form.
jsFiddle here
html, body {
height:100%;
width:100%;
margin:0px;
}
body {
display:table;
vertical-align:middle;
}
form {
display:table-cell;
vertical-align:middle;
width:240px;
margin:0px auto;
}
Full screen result here: http://jsfiddle.net/Sjk6m/embedded/result/
Related
i have my form and it looks like this
<form>
<fieldset>
name:textbox
lastname:textbox
address:textbox
</fieldset>
</form>
and i want my page to align its elements like
<form>
<fieldset>
name: textbox
lastname: textbox
address: textbox
</fieldset>
</form>
i am just using divs is there any other way to achieve this other than using tables?i need to align this elements to give my page a better navigation of inputs.
Use the table-related CSS display values to style block elements as though they were in a table:
display: table
display: table-row
display: table-cell
This will cause your block elements to behave as though they were <table>, <tr>, and <td> elements respectively.
Yes, it's possible just to use divs. Also, I'd use <input> so the user can actually type something in for your inputs.
HTML
<div>
name: <input type="text" />
lastname: <input type="text" />
address: <input type="text" />
</div>
CSS
input {
display: block;
}
http://jsfiddle.net/XzSGd/
<form>
<fieldset>
<label>name:</label> textbox
<label>lastname:</label> textbox
<label>address:</label> textbox
</fieldset>
</form>
If you use an additional tag around, you can set the css to be as follows:
label {
display: inline-block;
width: 100px; //whatever width suits you
}
This way, all the labels will be the same width and, as long as the text is shorter than that, they will make the textboxes align.
You could use classes for the labels. See code below
HTML
<form>
<fieldset>
<span class="label">name:</span> textbox
<span class="label">lastname:</span> textbox
<span class="label">address:</span> textbox
</fieldset>
</form>
CSS
.label{
display:inline-block;
width:150px;
}
*Change the width according to your need.
This is how I would do it. Float everything. Each textbox/label combo gets its own div, which makes it easy to apply a responsive design framework. Make this as narrow as you want by styling the fieldset. Obviously(?) you would want to include names for each input, and for-attributes for the labels.
http://jsfiddle.net/s3jn3/
input {
float: right;
margin-top: 0.5em;
}
label {
float: left;
}
fieldset>div {
clear: both;
}
<fieldset>
<div>
<label>Item A</label>
<input type="text" />
</div>
<div>
<label>Item B</label>
<input type="text" />
</div>
<div>
<label>Item C</label>
<input type="text" />
</div>
</fieldset>
Try to put it in table, like so:
<form>
<fieldset>
<table>
<tr><td align="left">name:</td> <td>textbox</td>
<tr><td align="left">lastname:</td> <td> textbox</td>
<tr><td align="left">address:</td> <td>textbox</td>
</table>
</fieldset>
</form>
I have a form inside a #main div, I want all the label to be on the left, and all the input area to be on the right.
So i have these CSS:
.right{
float:right;
}
#main{
width:80%;
}
textarea{
resize:none;
}
and the HTML:
<div id="main">
<form name="form1">
<div>
<label for="name">Name</label>
<input type="text" name="name" class="right">
</div>
<div>
<label for="description">About you</label>
<textarea name="description" class="right"></textarea>
</div>
<div>
<label for="location">Location</label>
<input type="text" name="location" class="right">
</div>
<input type="submit" value="Submit">
</form>
</div>
but the textarea doesn't want to go on the right, plus the inputs are going through the divs
here a jsfiddle:
http://jsfiddle.net/malamine_kebe/ZE7tp/
You need to include a float:right to the textarea.
Updated approach here: http://jsfiddle.net/nbrLJ/
Also include a clear:both to the div's.
Tip - you can target the form elements without a new class name, for example:
div.row input,
div.row textarea {
float:right;
}
Adding a width to the parent container will also help:
#main {
width:300px;
}
I'm no expert but I think you need to clear your floats
.clearfix {
clear: both
}
http://jsfiddle.net/ZE7tp/2/
Your inputs are running into each other. Notice they are pushing each other to the left. Set margins to give it some breathing room.
div {
margin: 3em 0;
}
http://jsfiddle.net/ZE7tp/3/
I want to vertically align all the input boxes in a particular is div
my code is in
http://jsfiddle.net/eSPMr/72/
<div id="editpart3">
<div id ="address1">
<p><b>Residential Address:</b></p>
<p> Line1 : <input type="text" value="#Model.Mem_ResAdd1" name="Mem_ResAdd1" /></p>
<p> Line2 : <input type="text" value="#Model.Mem_ResAdd2" name="Mem_ResAdd2" /></p>
<p> Line3 : <input type="text" value="#Model.Mem_ResAdd3" name="Mem_ResAdd3" /></p>
<p> Line4 : <input type="text" value="#Model.Mem_ResAdd4" name="Mem_ResAdd4" /></p>
<p>PIN Code : <input type="text" value="#Model.Mem_ResPin" name="Mem_ResPin" /></p>
<p><b>Res Phone: </b> <input type="text" value="#Model.Mem_ResPh" name="Mem_ResPh" /></p>
</div>
/div>
#editpart3 {
margin-top:10px;
border:.5px solid #bbb;
min-height:250px;
height:auto;
width:100%;
border-radius:5px;
#editpart3 input[type="text"] {
width:50%;
margin-left:5%;
}
#address1 {
float:left;
width:40%;
margin-left:4%;
height:auto;
}
#address2 {
float:left;
margin-left:9%;
height:auto;
width:40%;
}
#address1 p,#address2 p{
padding-top:10px;
}
i am tried to put margin left but affect all the input box. Is this only possible, when i take that particular input boxes seperatly ?
For a good format for form, I prefer to use tabular structure like this
Check this JSFiddle
Although I am against using tables for anything other than tabular data, in this case they can be extremely useful and effective for aligning form input elements:
<div id ="address1">
<p><b>Residential Address:</b></p>
<table border = "0">
<tr>
<td><p> Line1 : </td><td><input type="text" value="#Model.Mem_ResAdd1" name="Mem_ResAdd1" /></td></p></tr>
</div>
Continue the table for your other input elements.
I'm trying to take my Form layout away from tables and entering the world of div's and css.
I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input.
Here's what it currently looks like:
I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.
Here's the css:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
margin-right:4px;
vertical-align:top;
}
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
and the HTML:
<div id="content">
<label for="txt_RequestId">Request Id</label>
<input id="txt_RequestId" type="text" />
<label for="txt_District">District</label>
<input id="txt_District" type="text" />
</div>
nest the input elements in the labels so the text label and field are grouped.
this usage is specified in the HTML4 spec:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
<div id="content">
<label>
Request Id<br />
<input id="txt_RequestId" type="text" />
</label>
<label>
District<br />
<input id="txt_District" type="text" />
</label>
</div>
CSS:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
float:left;
margin-right:4px;
vertical-align:top;
}
example
Then apply display:inline and float:left to the <label>s (or use display:inline-block instead if you don't have to worry about older browsers example)
Change this
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
to this
#content input
{
display:inline;
margin:1px 20px 1px 1px;
}
That is remove the float:left and replace with display:inline;.
Example: http://jsfiddle.net/jasongennaro/ptKEh/
EDIT
#mdmullinax pointed out that the question also requested the text be above the input field
Missed that ;-)
In that case, remove the display rules and use three brs
<div id="content">
<label for="txt_RequestId">Request Id</label><br />
<input id="txt_RequestId" type="text" />
<br />
<label for="txt_District">District</label><br />
<input id="txt_District" type="text" />
</div>
Revised example: http://jsfiddle.net/jasongennaro/ptKEh/2/
I generally use tables for forms that are laid out like this. They are much easier to work with than CSS (IMO) and the structure is much more clear.
<table>
<tr>
<td>
<label for="txt_RequestId">Request Id</label>
<br /><input id="txt_RequestId" type="text" />
</td>
<td>
<label for="txt_District">District</label>
<br /><input id="txt_District" type="text" />
</td>
</tr>
</table>
CSS is very good for moving elements around with respect to their container. However when you want things to be positioned in a very regular way, dependent on other elements, it can really obfuscate the logic. <table>s are much more explicit about this.
Let's say I have an html snippet like this:
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating
It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.
Then you can float the button to the right and the input field fills the remaining space.
form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}
<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>
A simple fiddle: http://jsfiddle.net/v7YTT/90/
Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.
Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
I suggest using Flexbox:
Be sure to add the proper vendor prefixes though!
form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}
<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>
Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>
Easiest way to achieve this would be :
CSS :
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML :
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
Looks like : http://jsfiddle.net/JwfRX/
Very easy trick is using a CSS calc formula. All modern browsers, IE9, wide range of mobile browsers should support this.
<div style='white-space:nowrap'>
<span style='display:inline-block;width:80px;font-weight:bold'>
<label for='field1'>Field1</label>
</span>
<input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
you can try this :
div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}
<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>
The answers given here are a bit outdated. So, here I'm with the easiest solution using modern flexbox.
.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}
<div style="width:300px;">
<div class="input-container">
<label for="MyInput">label text: </label>
<input type="text" id="MyInput"/>
</div>
<div class="input-container">
<label for="MyInput2">Long label text: </label>
<input type="text" id="MyInput2" />
</div>
</div>
If you're using Bootstrap 4:
<form class="d-flex">
<label for="myInput" class="align-items-center">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>
Better yet, use what's built into Bootstrap:
<form>
<div class="input-group">
<div class="input-group-prepend">
<label for="myInput" class="input-group-text">Default</label>
</div>
<input type="text" class="form-control" id="myInput">
</div>
</form>
https://jsfiddle.net/nap1ykbr/