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
Related
I have the a textbox used as a search field as follows that I want to align to the right:
<div class="col-md-6 search-form" style="padding:13px 0;">
<form action="/search" method="post">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
</div>
I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it
.new-search-div {
display: inline-block;
text-align: right;
}
Here's a screenshot of where I am trying to align it...
text-align:right; will only right align text elements.
It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.
<form action="/search" method="post" class="pull-right">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
Don't use align:right;, there's no such CSS rule, use float:right; instead.
(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)
Already tried to give the Input a float: right; ?
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
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'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;
}
How do I get a button and a form element in the same line without a linebreak happening?
thank you very much!
<button>ask question</button>
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
Use this CSS style: style="display: inline;" on your form.
<form action="/search" method="get" style="display: inline;">
Here's a demo on JSBin.
You could make the button a float:
<button style="float: left;">ask question</button>
both <button> and <form> are block level elements. you'd need to make them inline with CSS display: inline. not sure if that's what you mean. also it depends on your broader HTML.
Input fields are block-level elements. You can change the display rules in CSS:
input { display: inline; }
You can float: left both the button and the form
For adding new line after input box then add -> input { display: block; } in your css file