I'm having trouble when displaying a searchbar in the right side of a header.
What I'm doing is the following:
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type="submit" class="btn btn-default">Submit</button>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<h2>Perfiles</h2>
</div>
</div>
</div>
Here's a fiddle to illustrate my problem:
https://jsfiddle.net/DTcHh/16632/
EDIT:
Ok, here's a picture with the problem:
What I want is that both the sarch button and the input are in the same row.
Your search input field has width: 100% and display:block. Fixing that should solve the problem. Try adding following to your CSS:
.form-control {
width: auto;
display:inline-block;
}
Fiddle.
Got it working!
The trick was in the use of class="form-inline"
Here is the code to make it work:
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type="submit" class="btn btn-default">Submit</button>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<h2>Perfiles</h2>
</div>
</div>
And here is the picture of what I was actually looking:
Related
I want to remove the margin on top the form, so that it will have the same margin with the text on the left.
This is my code:
<div class="secound-top container">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 col-xl-12">
<h4 class="title"> Plain Page</h4>
<form>
<div class="input-group">
<input class="search-text" type="text" name="name" placeholder="search for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
</form>
</div>
image
Insert this into you CSS file or in the style tags:
body{
margin-top: 0px;
}
I have solved the error, I enclosed the form tag on a container div, then with a negative margin-top, the form went up:
There is the code:
<div class="container-fluid form">
<form>
<input class="search-text" type="text" name="name" placeholder="search
for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
CSS
.form{
margin-top: -30px;
}
I am having some issues with a div not responding the way I believe it should be.
I have this code;
<div class="wrapper">
<div class="container">
<div class="col-md-12">
<div class="header-form" style="border: 2px solid purple; margin: 1%;">
<div class="row">
<form ng-controller="GetQuery" ng-submit="submitForm()">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Starbucks, McDonalds, etc..</label>
<input ng-model="form.keyword" type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">City, State or Zip..</label>
<input ng-model="form.location" type="text" class="form-control">
</div>
</div>
<div class="col-md-2">
<button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
</div>
</form>
</div>
</div>
</div>
</div>
This works correctly. However all I know want to do, is fix this div that contains the form into position: fixed, so when you scroll the div continues to stay in view. However, when I had an in-line style
style="position: fixed;"
and I inspect it with a mobile view the div defaults to only using half the page. In a desktop view it works as it should.
What am I missing?
I have the following code, meant to vertically align a button in my Bootstrap form section:
HTML:
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label for="isbn">ISBN# (10 or 13)</label>
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
CSS:
.form-isbn {
display: table-cell;
vertical-align: bottom;
float: none;
}
For some reason, it's still not working as it should. Screenshot attached shows what is happening (seems that vertical alignment is...top by default? I need the button to sit at the bottom of the row to properly align with the input field that it's next to.
Any idea what the issue might be? I'm sort of dumbfounded, and I have looked at a couple similar questions here on SO, to no avail. :(
Try this one.
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
Hope this help.
*Try to disable the css you made for the .form-isbn
I came across this recently and wanted to achieve the same. One way to achieve with pure bootstrap classes is to push the input and button to a separate row and remove the bottom margin in the first row to bring the label as close to the input as before
<div class="form-group">
<div class="row">
<div class="col-md-9 mb-0">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button">Check ISBN</button>
</div>
</div>
</div>
I have the following code...
<div class="row">
<div class="span6">
<h2>Some Text</h2>
</div>
<div class="span6">
<form class="form-inline pull-right">
<input type="text" class="input-large">
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
...but the search form doesn't align with the h2 tag. Do I need to have the form custom styled via css or am I missing out on some default Bootstrap class to fix this?
Thanks so much for taking time to read/answer this query.
[edit]
http://jsfiddle.net/nuB23/
Added jsfiddle
Try to add this style:
[class*="span"], h2 {
display: inline;
}
Updated Fiddle
Remove the pull-right class on the form.
The other issue is the h2 has extra padding and is a block level. I think what you are really after is this:
<div class="nav"> </div>
<div class="container">
<form class="form-horizontal ">
<div class="control-group ">
<label class="control-label large" for="searchInput">Label text:</label>
<div class="controls search">
<div class="input-prepend "> <span class="add-on"><i class="icon-search"></i></span>
<input type="text" id="searchInput" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</form>
</div>
http://jsfiddle.net/dbrin/AV654/
How do I make this search form full width like the button below it?
<form class="form-search">
<div class="input-append">
<input type="text" class="input-small search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
Done
http://jsfiddle.net/MgcDU/6033/
Using approach from here:
http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/
<div class="container">
<div class="row">
<div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
</div>
<div class="row">
<div class="span12 pull-right">
<form class="form-inline">
<button type="submit" class="btn" style="float:right;">Button</button>
<div style="overflow: hidden; padding-right: .3em;">
<input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
</div>
</form>
</div>
</div>
</div>
Make the .input-append have a specific width then give your .search-query a width of 100% and your .btn a width of 100%
This is the best We can do without more details - like the CSS that is controlling this or an example of what you are doing on the page.