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
}
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
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; ?
I have a horizontal form in Angular using Bootstrap. I have one date field that is just slightly misaligned. The input field of the IsMessedUp datepicker is aligned to the left compared to the input fields above it. I'd also ideally like it to be the same width of the "Sixth Thing" Calendar element.
The calendar element code is here:
<div class="form-group row">
<label class="col-md-2 col-md-offset-7 control-label">IsMessedUp Date: </label>
<p class="input-group col-md-3">
<input type="text" class="form-control input-sm" uib-datepicker-popup="{{format}}"
ng-model="ismessedupdt"
is-open="ismessedupdt.opened" min-date="minDate" max-date="maxDate"
datepicker-options="dateOptions"
ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default input-sm" ng-click="open3()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Here is the Fiddle: http://jsfiddle.net/k0c0e68n/
You should be removing the padding-left and padding-right for input-group [class*="col-"] for the p tag which is adding the extra space to the mentioned input element(isMessedUpDate)
Workaround: Remove the input-group class with custom class inputGroup or something and specify the class something like this:
.inputGroup {
position: relative;
display: table;
border-collapse: separate;
}
Updated fiddle: http://jsfiddle.net/Raghu9972/k0c0e68n/1/
This may not be a right approach, change it accordingly :)
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 created this html:
There are two input-fields in a col-sm-12:
And in the next column i have a submit button:
<div class="row">
<div class="col-sm-12">
<input id="bis" class="form-control input-sm a" type="text" value="18-12-2013" placeholder="Bis" name="bis">
</input>
<input id="von" class="form-control input-sm a" type="text" value="02-12-2013" placeholder="Von" name="von">
</input>
</div>
<div class="col-sm-12">
<input class="btn btn-info btn-sm" type="submit" value="Filtern" style="float:right" name="commit">
</input>
</div>
</div>
And added this extra css to the text-fields:
.a {width:100px; float:right}
Because i tried to have the input fields next to each other and the submit button in the next colum right below it.
My problem now is that the submit button now is besides the two input fields! Although i wanted it below!Why? Thanks
Fiddle: http://jsfiddle.net/52VtD/807/
That's because you aren't clear after the floated elements.
You have two solutions :
One add this to your CSS:
.col-sm-12 {
clear:both;
}
Here in this article is all what you need to know about the use of float.
Two use display:inline-block instead of float:
.a {
display:inline-block;
}
The demo http://jsfiddle.net/52VtD/814/
Use CSS clear property for this. Refer CCS-CLEAR>> for more info.
Here you can try this:
.col-sm-12 {
clear:both;
}