I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
Related
I'm creating my first ever html page, and I'm trying to do some alignment for divs and labels.
The labels and the input seem out of position even after spending multiple hours trying different combinations. Some properties are not working, like I used width for label and in chrome it says unknown property.
Below is the code. Any help with this would be appreciated.
Preview of the html/css part:
div.btn-toolbar {
position: relative;
top: 100px;
left: 40%;
width: 400px;
}
div.quote-details {
position: relative;
top: 122px;
left: 250px;
font-weight: bold;
font-size: 15px;
}
div.quote-detail-section-left {
float: left;
margin-top: 145px;
margin-left: 100px;
width: 35%;
}
input.quote-input {
padding: 4px;
}
label.field-label {
float: left;
font-weight: bold;
display: inline-block;
margin-left: 40px;
width: :50px;
clear: both;
}
div.quote-detail-section-right {
float: right;
margin-top: 145px;
margin-right: 80px;
width: 35%;
}
<div class="quote-rec-page">
<div class="quote-details">
<label for="section" class="Segment">Quote Details</label>
</div>
<div class="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class="quote-detail-section-left">
<div>
<label for="quoteNum" class="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber" />
</div>
<div>
<label for="quoteName" class="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName" />
</div>
<div>
<label for="oppName" class="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName" />
</div>
<div>
<label for="accName" class="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName" />
</div>
</div>
<div class="quote-detail-section-right">
<div>
<label for="expDate" class="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate" />
</div>
<div>
<label for="sync" class="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync" />
</div>
<div>
<label for="status" class="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status" />
</div>
<div>
<label for="quoteDesc" class="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc" />
</div>
</div>
</form>
</div>
Html/css including apex code:
<apex:page sidebar="false" showHeader="false">
<head>
<title>Quote Details</title>
</head>
<style>
div.btn-toolbar{
position:relative;
top:100px;
left:40%;
width:400px;
}
div.quote-details{
position:relative;
top:122px;
left:250px;
font-weight:bold;
font-size:15px;
}
div.quote-detail-section-left{
float:left;
margin-top : 145px;
margin-left: 100px;
width:35%;
}
input.quote-input{
padding:4px;
}
label.field-label{
float:left;
font-weight:bold;
display:inline-block;
margin-left : 40px;
width::50px;
clear:both;
}
div.quote-detail-section-right{
float:right;
margin-top : 145px;
margin-right: 80px;
width:35%;
}
</style>
<body>
<div class="quote-rec-page">
<div class = "quote-details">
<label for = "section" class="Segment">Quote Details</label>
</div>
<div class ="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class ="quote-detail-section-left">
<div>
<label for="quoteNum" class ="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber"/>
</div>
<div>
<label for="quoteName" class ="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName"/>
</div>
<div>
<label for="oppName" class ="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName"/>
</div>
<div>
<label for="accName" class ="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName"/>
</div>
</div>
<div class ="quote-detail-section-right">
<div>
<label for="expDate" class ="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate"/>
</div>
<div>
<label for="sync" class ="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync"/>
</div>
<div>
<label for="status" class ="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status"/>
</div>
<div>
<label for="quoteDesc" class ="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc"/>
</div>
</div>
</form>
</div>
</body>
</apex:page>
I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.
As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.
Remove padding-top and padding-bottom
.input-group {
width: 100%;
}
.input-group-btn {
height: 100%;
}
.btn {
height: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
Please set a height for input-group.
.input-group {
width: 100%;
height: 10px;
}
Then it should work like expected.
There is also another good answer for this problem here.
The parent needs height: 100%
.input-group {
width: 100%;
}
.input-group-btn, .outer, .btn {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.
.left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
Try like this: Demo
If you need multi line text box, use textarea instead of input type text
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
Edit:
As you mentioned, its not form-control class, its form-control-label.. You can get more info here
Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>
If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:
Docs
For Example:
<form class="form-horizontal">
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">Summary</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="summary" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" style="height:100px;width:400px" />
</div>
</div>
</form>
<input class="right" type="text" name="Description" style="height:100px;width:400px;">
Remove width from input of description, also please change to textarea, instead of input.
You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code
<div class="form-group">
<label class="col-lg-3 control-label ">City</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
</div>
</div>
</div>
</div>
</div>
Like this?
https://jsfiddle.net/d6tscd18/
.left {
width: 30%;
display: inline-block;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
display: inline-block;
}
try this:
<html>
<head>
<title>sample</title>
<style type="text/css">
.left {
width: 30%;
display: inline-block;
text-align: right
}
.right {
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font- size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
If you have trouble getting it in place you can also force a table layout without using tables:
.login-form {
display: table;
}
.login-form>div {
display: table-row;
}
.cell {
display:table-cell;
vertical-align: top;
}
...
Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):
...
<form action="post" class="login-form">
<div>
<label class="left cell">Summary:</label>
<div class="cell">
<input class="right" type="text" name="Summary" size="50">
</div>
</div>
<div>
<label class="left cell">Description:</label>
<div class="cell">
<textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
</div>
</div>
</form>
...
Check it here
Remove the style attribute from the description input type, it will then appear as the summary input box.
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description">
With style sheets I float name, email left and nickname and school right but I would like their text boxes to start at the same point. How can I achieve this with CSS?
<div id="container" align="center">
<div id="name">Name:
<input id="name_text" type="text">
</div>
<div id="nickname">Nickname:
<input id="nickname_text" type="text">
</div>
<div id="email">Email Address:
<input id="email_text" type="text">
</div>
<div id="school">School:
<input id="school_text" type="text">
</div>
</div>
You have to use this way:
There should be <label> to make sure when the user clicks on the label text, it focuses on the respective input.
The <strong> tag has a display: inline-block making it easy to set the width.
You don't need so many ids.
You need to give name attribute to all the <input /> fields.
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
li {
list-style-type: none;
}
li p {
display: inline-block;
width: 120px;
text-align: left;
font-family: "Times New Roman";
font-style: oblique;
font-size: 14px;
}
<div id="container" align="center">
<ul>
<li>
<p>Name:</p>
<input type="text">
</li>
<li>
<p>Nickname:</p>
<input type="text">
</li>
<li>
<p>Email Address:</p>
<input type="text">
</li>
<li>
<p>School:</p>
<input type="text">
</li>
</ul>
</div>
Codepen
A little modification,copy this code and check it.
<html>
<head>
<style>
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
</style>
</head>
<body>
<center>
<div id="Holder" style="width:50%;">
<div id="L_div" style="float:left;">
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
</div>
</div>
<div id="R_div" style="float:right;">
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
If you are a fresher in css use this site W3school for guidence
Regds
I am trying to design the layout in the below screenshot
I tried to implement the same in fiddle
http://jsfiddle.net/NNLct/1/
<div id="CorpDealerSearch" >
<div class="left"> DealerName </div>
<div class="left"> Region </div>
<div class="left"> DealerCode </div>
<div class="left"> Area </div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
</div>
Please help in suggesting proper css to get the design
Have a look at this FIDDLE
HTML
<div class='table'>
<div class='row'>
<div class='cell'>DealerName
<input type='text' />DealerCode
<input type='text' />
</div>
<div class='cell'>Region
<input type='text' />Area
<input type='text' />
</div>
</div>
</div>
CSS
body{
width:100%;
padding:0;
margin:0;
box-sizing:border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding-right:20px;
}
input {
display:block;
width:100%;
}
Try something else:
http://jsfiddle.net/Ta6Qk/
HTML
<div class="main">
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
</div>
and CSS
.main {
width: 400px;
position: relative;
}
.main div {
border: none;
display: inline-block;
width: 44%;
margin-right: 3%;
}
input {
width: 100%;
}
label {
display:block
}
You have to include label and input in the same div:
http://jsfiddle.net/NNLct/5/
Don't forget you can also use label tags to associate the text to the related input.
<div id="CorpDealerSearch" >
<div class="left">
DealerName <input type="text"/>
</div>
<div class="left">
Region <input type="text"/>
</div>
<div class="left">
DealerCode <input type="text"/>
</div>
<div class="left">
Area <input type="text"/>
</div>
</div>
CSS:
.left
{
float:left;
}
Going by your existing markup, here is a : DEMO
Float the elements and after every 2 element, clear the floats, as simple as that!! :)
CSS
.left {
float:left
}
.clr{clear:both}
HTML
<div id="CorpDealerSearch">
<div class="left">DealerName
<br />
<input type="text" />
</div>
<div class="left">Region
<br />
<input type="text" />
</div>
<div class="clr"></div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
</div>
See this fiddle:
http://jsfiddle.net/NNLct/16/
Using display:table; display:table-row; display:cell;
Here's the fiddle:Check this
Here's the HTML Code:
<div id="container">
<div id="left" class="left">
<div id="top-left" class="innerdiv">
<div id="lbl-tl">
Dealer Name:
</div>
<div id="txt-tl">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-left" class="innerdiv">
<div id="lbl-bl">
Dealer Code:
</div>
<div id="txt-bl">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
<div id="right" class="right" >
<div id="top-right" class="innerdiv">
<div id="lbl-tr">
Region:
</div>
<div id="txt-tr">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-right" class="innerdiv">
<div id="lbl-br">
Area:
</div>
<div id="txt-br">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
</div>
And here's the CSS:
*
{
margin: 0px;
padding: 0px;
}
#container
{
width: 700px;
min-height: 150px;
}
.left
{
width: 49%;
min-height: 150px;
float: left;
}
.right
{
min-height: 150px;
width: 49%;
float: right;
}
.innerdiv
{
height: 75px;
}
First I would change the html to:
HTML
<div id="CorpDealerSearch" >
<div>
<label for="dealerName">DealerName</label>
<input type="text" id="dealerName" name="dealerName">
<label for="Region">Region</label>
<input type="text" id="Region" name="Region">
</div>
<div>
<label for="DealerCode">DealerCode</label>
<input type="text" id="DealerCode" name="DealerCode">
<label for="Area">Area</label>
<input type="text" id="Area" name="Area">
</div>
</div>
And the css would be:
CSS
#CorpDealerSearch label, input{
float:left;
clear:both;
}
#CorpDealerSearch div{
display:block;
float:left;
width:200px;
}
hope this will help.