I would like to display, label and inputs on same line :
I tried in CSS:
form label {
display:block;
float:left;
}
http://jsfiddle.net/kY5LL/18/
here it is
.span6{
overflow:hidden;
display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}
UPDATED FIDDLE
If you are using Bootstrap 3.x:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-sm-2 control-label">Label</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputCity" placeholder="Input text">
</div>
</div>
</form>
Fiddle
I did this in my script. I created a div container box and inside the container, a label left to an input element.
.
HTML
<div class="container">
<label>Firstname</label>
<input type="text">
</div>
CSS
div.container{
overflow:hidden;
}
label{
width:70px;
display:block;
float:left;
text-align:left;
}
input{
width:240px;
float:left;
}
remove the class input-block-level given to input tag
Related
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.
The form and button are on the left hand side of the screen, how do I get them in the center?
If I don't include "display: inline;" the form is centered in the middle of the page but as soon as I include it the form is on the left hand side of the screen.
HTML
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
</form>
<button type="submit" onclick="validate1();" >Cancel</button>
</div>
CSS
rounded{
text-align:center;
align:center;
}
form {
margin:0 auto;
text-align:center;
align:center;
display: inline;
}
Check with this fiddle and css.
.rounded{
text-align:center;
}
form {
margin:0 auto;
text-align:center;
display: inline-block;
}
You also need to keep button within form
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
<button type="submit" onclick="validate1();" >Cancel</button>
</form>
</div>
rounded matches <rounded> elements, but your container is a <div> with class="rounded".
Use .rounded to match elements that are members of the rounded class.
Try adding a width and margin to the css of the rounded box like this:
.rounded {
width: auto;
margin: 0 auto;
text-align: center;
/* align: center; - Remove this */
}
This worked on my test of your code.
Try
.rounded
{
text-align:center;
align:center;
}
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.
I have some text in a link "title" and also a form box and I want the text on the left and the form on the right. However, whenever I try to do this what comes out is the line of text and then the form appears BELOW the text. I want them on the same horizontal line.
So I want with the dots: TEXT ................................. SIGN IN BOX
here is the code:
<div id="container">
<a href="index.php"><font size="6">Title</font><a>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset>
</div>
Here is the CSS for the container:
#container {
margin:0 auto;
position:relative;
width:780px;
}
and topnav
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
}
How do I accomplish the task? Thanks
DIV is a block element so will always do that. You need to make it a non-block element by setting float and display.
Besides the solution below you could use a table but that is frowned upon.
<div id="container">
<div class="titleDiv"><a href="index.php"><font size="6">Title</font><a></div>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset></div>
</div>
Then set your CSS to this:
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
float:left; display:inline;
}
.titleDiv
{
float:left; display:inline;
}
so you want div.topnav appear on the left of the a ? Easiest would be to replace div with a non-block element such as span... otherwise see float css style