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">
Related
I am aware this is very basic but I have been trying so many ways of removing the white space on the right side of my page yet still it's been a little problem for me as a learner. The sign_in and paratext are inline as shown but when I used set the margins and paddings to 0 to remove the white space from the right side of my page, the sign in (which is the login form) moves below the paratext instead of staying inline.
Here you go. Hope this helps you.
body {
margin: 0;
padding: 0;
}
.sign_in {
display: inline-block;
width: 55%;
font-size: 3vw;
margin-left: 30px;
}
.paratext {
display: inline-block;
font-size: 3vw;
width: 35%;
color: #008B8B;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" > <b>Sign In </b></h1><br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me" >
<label >Remember Me </label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;" href="#">Forgot password?</a></span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<p class="text-right">
<span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
<html>
I have refactored your code by removing irrelevant row classes and inline styles. You also specified sign_in{width:70%}, but haven't specified what is 100%, so I added body{width:100%}. In addition to that, I commented out certain paddings and margins you can see that in the example below.
body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
font-weight: 900;
font-size: 40px;
}
.form-group button{
font-weight: 900;
background-color:#008B8B;
}
.sign_in {
width: 70%;
/*margin-right: -30%;*/
}
.paratext {
display: inline-block;
/*padding-top: 250px;*/
font-size: 16px;
word-wrap: break-word;
/*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1>Sign In</h1>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me">
<label>Remember Me</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right forgot-password">Forgot password?</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="button" type="submit">Login</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right">Already a member?</p>
</div>
</div>
</div>
</form>
</div>
</body>
Try this code example in your project and see if the problem remains. If you still have a problem then you need to update you question with the rest of the codebase you have.
I have this a contact form and I need to float it at the extreme right of its container. How can i do it? I'm trying with everything but nothing happen. Maybe i have to set different class for columns? This is the code:
HTML
<section id="services" class="section text-center">
<div class="container">
<div class="col-md-6 map">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2694.5937634214993!2d8.0133807!3d47.5173021!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x9b610c417aa1ee02!2sZAG+Engineering!5e0!3m2!1sde!2sch!4v1443705863599"></iframe>
</div></div>
<div class="col-md-6 form">
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Firma" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Telefon" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
<!--/.container -->
</section>
CSS
.col-md-6.map { margin-left: -15px; }
.form-horizontal { width: 100%; float: right; }
.form-group { margin-bottom: -25px; }
.col-md-6.form { border: 1px solid red !important; }
Add col-md-offset-2
<div class="form-group">
// place col-md-offset-2 here for each input
<div class="col-sm-10 col-md-offset-2">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
inside form-group either change col-sm-10 to col-sm-12 that will make your input fields take entire width of your form or if yo want them right aligned give float:right to your col-sm-10 div it will work
Not sure what you really want, but if you want the whole form being at the extrem right of the screen, you have to remove the fixed width of your div class="container" which is the reason you have white space on right side.
If you want input being on the right side of your red-bordered area, you should put "float:right" on the col-sm-10" class. Hope it helped you
I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):
<div class="col-sm-1">
<div class="form-group">
<textarea placeholder="Description" class="form-control" rows="1" required></textarea>
</div>
</div>
<div class="col-sm-1">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
etc.
which results in:
Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.
Does anybody know how I can style this better? All tips are welcome!
You could override the padding on the col-sm-* with a class like this
.inputItem {
padding-left: 2px;
padding-right: 2px;
}
This might be useful.
You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.
#media (min-width: 768px) {
form .form-gutter >[class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
}
form .form-control,
form .input-group-addon {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<div class="container-fluid">
<h1>Form </h1>
<div class="row form-gutter">
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<input placeholder="Contract rental" class="form-control" type="text">
<div class="input-group-addon">€</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</form>
Without the use of tables, using CSS, how can i align a group of labels and their associated input controls like below (these controls will be in a div):
The controls will be laid out like:
[Label1] [Input1] [Label4] [Input4]
[Label2] [Input2] [Label5] [Input5]
[Label3] [Input3] [Label6] [Input6]
This is kind of open-ended, since a lot depends on the questions, the labels and other specific considerations that you may have for your code.
However, the easiest way to accomplish something like this (IE8+) is probably to use display:table and display:table-cell.
Here's a quick fiddle that basically does that: http://jsfiddle.net/cwz3g/
It uses a lot of divs: one per column, one per label/field pairing and one each for the label and field, but should cover a lot of the common things like vertical alignment of labels and fields. You'll probably just need to tweak some things for your code situation, but it should get you started.
For your two columns, you'll want to put them in container divs, which could then be floated against each other or absolutely positioned, or whatever works for your layout.
To make the labels take up the same amount of room, they can be styled with a width attribute.
Finally, in your diagram, you've got the labels left-justified and the inputs right-justified. That's doable, but to my eyes it scans better if the inputs are justified toward their labels.
I've got it all in a fiddle here: http://jsfiddle.net/M7AjF/
<div class="form-column">
<label for="Input1">Option 1</label>
<select id="Input1"><option>All</option></select>
<br>
<label for="Input2">Option 2</label>
<input id="Input2" type="text"/>
<br>
<label for="Input3">Option 3</label>
<input id="Input3" type="text"/>
</div>
<div class="form-column">
<label for="Input4">Option 4</label>
<select id="Input4"><option>--</option></select>
<br>
<label for="Input5">Option 5</label>
<select id="Input5"><option>0</option></select>
<br>
<label for="Input6">Option 6</label>
<select id="Input6"><option>1</option></select>
</div>
And the css:
.form-column {
width: 50%;
float:left;
}
.form-column label {
width: 40%;
padding-right: 10%;
}
/*
This right justifies your inputs, which I don't recommend.
.form-column select, .form-column input {
float: right;
}
.form-column br {
clear: right;
}
*/
I suggest to use display:table layout like this:
html
<div class="table">
<div class="row">
<div class="cell"><label>Option 1</label></div>
<div class="cell"><select><option>ALL</option></select></div>
<div class="cell"><label>Option 4</label></div>
<div class="cell"><select><option>--</option></select></div>
</div>
<div class="row">
<div class="cell"><label>Option 2</label></div>
<div class="cell"><input type="text"></input></div>
<div class="cell"><label>Option 5</label></div>
<div class="cell"><input type="text"></input></div>
</div>
<div class="row">
<div class="cell"><label>Option 3</label></div>
<div class="cell"><input type="text"></input></div>
<div class="cell"><label>Option 6</label></div>
<div class="cell"><select><option>1</option></select></div>
</div>
</div>
css
.table{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.table > .row > .cell{
text-align: right;
padding-right: 75px;
}
.table > .row > .cell > input{
width:75px;
}
fiddle
you can use bootstrap.css for easy way.
http://getbootstrap.com/components/
check my fiddle.
<form class="form-horizontal" role="form" method="post" action="">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-4">Title</label>
<div class="col-xs-8">
<input name="title" type="text" class="form-control" value="Circular Countdown"/>
</div>
</div>
</div>
</form>
http://jsfiddle.net/4M7qH/
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
I am using bootstrap.
And I want to align the form in the middle of this div col-md-12 column.
Any solutions for this?
Demo http://bootply.com/103569
Could use an offset like:
<div class="container">
<div class="row clearfix">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
</div>
or
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-offsetting
You can have two solutions here with the property display.
One with inline-block:
.col-md-12 column {
text-align:center;
}
.col-md-12 column form {
display:inline-block;
}
Two with table :
.col-md-12 column form {
display:table;
margin:auto;
}
If you have a fixed width for the form you only need to add the margin:auto
Give your form a class
<form role="form" class="myForm">
and add the following style to it
.myForm
{
width: 480px;
margin-left: auto;
margin-right: auto;
}
http://bootply.com/103575
I would try adding
class="center"
to
<form role="form">
ending up with
<form role="form" class="center">
and creating the style declaration:
.center{margin:0px auto;}
keeping in mind that .center must have a set width that is less than the width of it's container.
Hope that helps.