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/
Related
in html/css i have simply two form and i want to set that to single row as inline widthout using float. you can see this ONLINE DEMO
in this below code i want to set display:inline to have single row as two div. like with this screen shot:
HTML:
<div class='single-page'>
<div id="verification-panel">
<form>
<fieldset>
<legend>verification code</legend>
<label>Mobile Number:</label>
<input type="text" class="inputs" placeholder="EX:">
<span class="help-block"></span>
<button type="button" class="btn">Submit</button>
</fieldset>
</form>
</div>
<div id="activation-panel">
<form>
<fieldset>
<legend>Active Acount</legend>
<label>Verfication code:</label>
<input type="text" class="inputs" placeholder="Verficcation code">
<span class="help-block"></span>
<button type="button" class="btn">Submit</button>
</fieldset>
</form>
</div>
</div>
use display:inline-block;
#verification-panel,#activation-panel{
display:inline-block;
}
Copy this code to your CSS section:
.single-page {
display: inline-block;
width: 769px;
}
.verification-panel,
.activation-panel { display: inline-block; }
To get the forms inline, apart from declaring the display: inline-block to both classes, you have to define a width for the parent container big enough to let them sit besides each other.
Here is a demo
.single-page{
display: inline;
width: 100%;
}
#verification-panel,#activation-panel{
display: inline-block;
width: 49%; // because of margin or etc.
}
#verification-panel,#activation-panel{
display:inline-block; width:250px;
}
I want to display textbox first and then button.But now button appears first.I attached css code and html
css
.search,.stxt{
float: right;
}
html
<form method="POST">
<p style="align:right;">
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search" class="search">Search</button></p>
</form>
The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.
I would recommend wrapping your elements within a div and having that float to the right instead.
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
So add the same class for both elements like below
HTML:
<form method="POST">
<p style="align:right;">
<input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search alignLeft" class="search">Search</button></p>
</form>
And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:
.alignLeft{
float: left;
}
p{
margin-left: 290px;
}
Fiddle:http://jsfiddle.net/gvmtuo5j/1/
Alternative:
Try Like this:
.search,.stxt{
float: left;
}
p{
margin-left: 290px;
}
check out this fiddle:http://jsfiddle.net/gvmtuo5j/
Just move the button before your input text :
<form method="POST">
<p style="align:right;">
<button name="search" class="search">Search</button></p>
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>
Or the simpliest way is to put the float right on your <p> tag and remove the others float right
I am trying to align to input text boxes of a form side by side but i not able to do so. Please help.
Fiddle: here
HTML:
<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span>
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>
CSS:
.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
http://jsfiddle.net/rHh3w/12/show
Just need to set your p element to "display:inline;" by default they are block elements and will not align next to each other.
also deleted two br tags
p {display:inline;}
How about display them like a table.
.myForm {
width:100%;
display:table;
}
.myForm div {
margin:0;
padding:0;
display:table-cell;
}
.myForm div:last-of-type{
text-align:right;
}
.myForm div:last-of-type Align text to the right side.
Check it on http://jsfiddle.net/463QF/
Remove <br /> from your HTML markup.
Write:
p{
display:inline-block;
width:50%;
}
.wpcf7-form-control-wrap input[type="text"],.wpcf7-form-control-wrap input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
Note:
inline-block leaves white space between elements. Write elements on same line to avoid it.
Like write
</p><p>
(on same line)
rather than
</p>
<p>
(on different lines)
Fiddle.
Try this
What I have done is added the following:
p {
float: left;
}
That's all you need to do, it also means that if your container width goes below the fixed width of the two input boxes together, they will float down over two lines rather than breaking and spilling out of their container.
While you're at it, it might be worth changing the text labels to actual labels, this will allow the user to click on the label and still highlight the form, which is growing increasingly important due to the rise in mobile use.
Also, you missed a closing > of your first input box.
Try below CSS for p tag
p
{
width:auto;
float:left;
margin-right:10px;
}
If you need some space between text box then u can set margin-right to the same.
Just add this to your CSS code : p{width:40%;border:1px solid #000;float:left}
Fiddle :http://jsfiddle.net/logintomyk/PSQ7u/
HTML example:
<div class="myForm">
<div>
<label for="name">Your name</label>
<input name="name" id="name" type="text" />
</div>
<div>
<label for="email">your email</label>
<input name="email" id="email" type="text" />
</div>
</div>
CSS:
.myForm div {
width: 47%;
margin:0;
padding:0;
float:left;
}
.myForm div label
{
display:block;
}
fiddle
I've tried a few things but haven't been able to get the result I am after.
This is my jsfiddle:
http://jsfiddle.net/spadez/2JTfc/4/embedded/result/
This is the code:
<div id="header">
<img src="test.jpg" />
<form id="search_form">
<input class="kw" id="keyword" placeholder="Keyword" type="text"></input>
<input id="loc" placeholder="Location" type="text"></input>
<input type="submit" value="Search" class="button" id="search">
</form>
<ul>
<li>Post
</li>
</ul>
</div>
How can I move the form so that it sits to the right of the test.jpg image in the header on the same line? Should I be surrounding it in divs and floating it, or is there a nicer way?
Add display:inline-block to form
#search_form{
display:inline-block
}
DEMO
Try this:
#header img {vertical-align: middle;}
#header form {display: inline-block; vertical-align: middle;}
The last act is to remove float: left from the inputs.
The default display style of a form is block. So you'll need to change that to inline-block as you want it to appear inline. See this jsFiddle
#search_form {
display: inline-block;
}
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/