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.
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 this problem whereby my page style with bootstrap div container for the sign in forms and top portion logo, this part however covered or blank out my intended background image styled using CSS
html{
background: url("Bg1.jpg")no-repeat center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
margin:0;
}
and my the 2 containers where I place a logo on top and the sign in form in the middle
<div class="container"><!--top portion-->
<div class="row"> <!--logo portion-->
<div class="col-sm-3 col-xs-12">
<img class="image-responsive img-rounded" alt="B-Flight" src="Logo1.png" id="banner" />
</div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
<div class="col-sm-3 col-xs-0"></div>
</div><!--row-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4"></div><!--left column of whole page-->
<div class = "col-xs-12 col-sm-4">
<title>Login</title>
<form class="form-signin">
<h2 class="form-signin-heading align-center">Sign In</h2>
<label for="usrName" class="Titlefont">User Name</label>
<input type="text" id="usrName" class="form-control" placeholder="user name" required autofocus><br>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<br>
<button class="btn btn-link btn-block" type="button">Not registered? Sign up now</button>
</form>
</div><!--set alignment-->
<div class="col-xs-12 col-sm-4"></div><!--right column of the page-->
</div><!--row-->
</div> <!-- /container -->
And there photo of it screen shot
Appreciate if anyone be able to help out
Thanks
By default the background-color of body is set to white.
So when you style your html the body is not targeted and still white.
You might instead want to try using
html, body {
/* Your CSS goes here */
}
This should solve your problem.
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:
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/