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; ?
Related
I have some difficulties positioning two elements on the right side of the page. Strangely the suggested answers of similar questions did not work at all or gave poor results, but most of them were correct if I used simpler elements like text-fields for example.
The view is:
Here's what I have:
input, select, textarea {
max-width: 280px;
text-size-adjust: auto;
}
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
I have tried to adjust the position with float: right and by using the bootstrap grid system.
I assume you have somehow set your input-group to have a fixed width, instead of the default 100%. Otherwise it doesn't make sense to talk about positioning.
In any event, bootstrap has a pull-right class you can use in order to float elements to the right. Just add it to your first div.
.input-group {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group pull-right">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
Have a read about this on the official docs, here
try this one:
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input class="form-control" type="text" placeholder="Search text" ng-model="searchText">
</div>
DEMO
or
.input-group-addon {
min-width:100px;
text-align:left;
}
DEMO HERE
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 the following HTML:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default">Add</button>
</div>
</form>
The issue I am facing is that these two elements aren't taking the entire line (they aren't touching). See here:
Why is this the case?
Here is a fiddle show casing the problem: https://jsfiddle.net/nirchernia/pyfetd4p/
A couple of things:
form-group is display:block.
put both the input and button tag inside the same form-group
The form-control is a display:block as well. Use CSS to force it to display:inline-block and shorten the width (it was 100%).
jsfiddle: https://jsfiddle.net/b6x12fc8/
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
<button class="btn btn-default">Add</button>
</div>
.form-inline .form-control { width:75%; display:inline-block;}
Give following css. Because currently it will taking width:auto; So, it will take default width of input field.
To make it touch with button. Give 100% and there is padding given so, it will increase more width and overlap the button. So, remove padding but padding:0
.form-inline .form-control {
padding: 0;
width: 100%;
}
https://jsfiddle.net/pyfetd4p/1/
To make side by side in small screen use following css;
.form-inline {
display: flex;
}
Fiddle link
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
How can I get a header and a form inline?
<h2 class="sub-header">Name</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="input" class="form-control" id="name" placeholder="Name">
</div>
<button type="submit" class="btn btn-default" title="Save">
<span class="glyphicon glyphicon-ok"></span>
</button>
<form>
I want the form on the right side and the sub-header on the left side, so I tried to add pull-right to the form-class, but it still does not work, the form is always under my sub-header.
You need to give the form_inline a float right in CSS.
.form_inline {
float: right;
margin-top: -XXpx;
}
The margin-top is to setup the height of the form.
h2 , .form-inline , .form-group{
display:inline;
}
http://jsfiddle.net/JvfqB/
Something like this?
Edit:
Just cleared it up a little (but refer to the original jsfiddle):
http://jsfiddle.net/JvfqB/1/
Try using the css float
.Anyclass{
float:right;
}
Another method is the css display element
.AnyClass{
display:inline
}