So I have my search box as follows:
<div class="input-group-">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
However, is displays like this: http://gyazo.com/7c6d81ea6341d2d4461c74eb4afb76e2
Any help? Thanks.
EDIT:
Using the bootstrap min css.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
To make Inline form keep your code like this
<form id="form_search" name="form_search" method="get" action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="Search for..." type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
http://www.bootply.com/p1BgBMMjN9
Updated URL:
http://www.bootply.com/6wVwlnjp0a
For the Attached Search btn
http://www.bootply.com/1jX4AhOZ3o
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
This will resolve your issue.
put in inside a div like this.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
That should solve the problem.
<div class="input-group">
<input type="text" name="s" id="search_top" class="form-control" placeholder="Search For Patches"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
This is how you can do. You want the Input and the Search on one Line.
Code for this is
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter email">
<button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search" style="font-size:24px"></span></button>
</div>
</form>
It happens because 'search' properties are:
display:block;
width:100%;
so change that in css of the class 'form-control' like:
.form-control{
display:inline;
width:50px;
}
Does it work now?
Related
How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
Can anyone give me some advice on how to transform this:
<p>Find Entry/Exit: #Html.TextBox("SearchString", null, new { #placeholder = "Search..." }) <input class="btn btn-danger btn btn-xs" type="submit" value="Search" />`
to bootstrap button add on?
I want to do something like this:
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
, but I don't know where to put "Search String" in it. Thanks in advance!
try following
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" id="SearchString" name="SearchString" placeholder="Search String"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
Please make sure to add bootstrap css and JS libraries in your page.
Reference to bootstrap
I am running into an issue where submitting my form tries to POST to my search.php instead of requests.php like it should.
Search button on sidebar:
<li class="sidebar-search">
<form class="search" action="search.php" method="POST">
<div class="input-group custom-search-form">
<input type="text" class="form-control" name="results" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" name="search">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
Submit button for form:
<div class="panel-body">
<div class="row">
<form class="request" action="requests.php" method="POST">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Address</label>
<input class="form-control" name="address" placeholder="Enter address">
</div>
<div class="form-group">
<label>Info</label>
<input class="form-control" name="info" placeholder="Enter info such as S/B, Locates, promised, fence/grass">
</div>
<button type="submit" name="request" class="btn btn-default">Submit Button</button>
<button type="reset" class="btn btn-default">Reset Button</button>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
Looks like that you've forgotten to close the form tag
somewhere around this html comment "<!-- /input-group -->"
you should add
</form>
https://jsfiddle.net/2v049ksy/
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:
How do I align these two elements? Here is the HTML:
<div class="span6">
<input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>
In order to complete that, you must use proper Twitter Bootstrap classes for forms.
In this case, that is .form-inline class.
Here is proper markup:
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email"/>
<button type="submit" class="btn">Sign in</button>
</form>
Here is demo http://jsfiddle.net/YpXvT/42/
<div class="navbar-form pull-left">
<input type="text" class="span2">
<button class="btn">Sign up</button>
</div>
copied from http://twitter.github.io/bootstrap/components.html#navbar
or
<div class="input-append">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
or
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
<div class="input-group">
<input type="email" class="form-control" required="required" placeholder="monEmail#domaine.fr">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
</span>
</div>
change css for class input-group-btn in boostrap-min: vertical-align =>top
it s work for me