In twitter bootstrap 3 i would like to add a buttongroup in the navbar, but it seems to break the navbar since it creates linebreaks:
<li>
<form class="navbar-form form-inline" >
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
</li>
how can i avoid the linebreak in the navbar?
Maybe you don't need the to put the form inside a list item:
<!-- Start Of Example -->
<form class="navbar-form form-inline">
<div class="input-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</span>
</div>
</form>
<!-- End Of Example -->
JS Fiddle Example
Update: another method (you could also use navbar-right to align the ul block to the right)
<!-- Start Of Example -->
<ul class="nav navbar-nav">
<li>
<div class="navbar-form form-inline" role="form">
<div class="form-group">
<input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
</div>
<div class="form-group">
<button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
</div>
</div>
</li>
<li>
<li>Action</li>
</li>
</ul>
<!-- End Of Example -->
Example 2
Related
I'm using bootstrap i have search bar and button but when i minimize the browser or when open developer tools in responsive way the search button moving away from search bar how to make them together?
<!--START SEARCH-->
<div class="col-sm-6 col-md-3" style="float: center">
<ul class="nav navbar-nav navbar-center">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
<!--END SEARCH-->
I would suggest something like this. The calc() style attribute ensures, that there is always enough space for your button.
<div class="input-group" style="width: 100%;">
<input class="form-control" placeholder="Search" name="q" style="width: calc(100% - 80px);display: inline-block;" type="text">
<div class="input-group-btn" style="width: 60px;display: inline-block;">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
You will have to adapt the pixel numbers and probably will not need the width attribute for the .input-group, as you use 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 am trying to make the filter to the left of my text box exactly the same height as the text box and a smaller width; exactly like in this picture
My code and current search box looks like this:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group">
<div class="input-group-btn search-panel">
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<option value="all">All</option>
<option value="username">Username</option>
<option value="email">Email</option>
<option value="studentcode">Student Code</option>
</select>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->
The CSS is off because you're using a <select> element as a <button class="dropdown-toggle">. Change your HTML to the following:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group">
<div class="input-group-btn search-panel">
<button id="search_condition" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">All <span class="caret"></span></button>
<input name="search_param" value="all" type="hidden">
<ul class="dropdown-menu">
<li class="option_select" data-value="all">All</li>
<li class="option_select" data-value="username">Username</li>
<li class="option_select" data-value="email">Email</li>
<li class="option_select" data-value="studentcode">Student Code</li>
</ul>
</div>
<input class="form-control" name="x" placeholder="Search term..." type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->
Replace your <select> with a button that toggles a dropdown with a list of options, each with an attr data-value="" that would match the value of an option in the select. This fixes the CSS issue, but your need some custom JavaScript to handle the selection of an option:
$(".option_select").on("click", function(){
$("input[name=search_param]").val($(this).attr("data-value"));
$("#search_condition").html($(this).text() + ' <span class="caret"></span>');
});
What this will do is set the label of the button to that of the option, as well as set a hidden <input> element's value to that of the selected option.
Here's a working example as well:
Bootply
Try This:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="get" id="searchForm" class="input-group" >
<div class="input-group-btn search-panel">
<select name="search_param" id="search_param" class="btn btn-default dropdown-toggle form-control" style="width:150px;" data-toggle="dropdown">
<option value="all">All</option>
<option value="username">Username</option>
<option value="email">Email</option>
<option value="studentcode">Student Code</option>
</select>
</div>
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default form-control" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<!-- <button class="btn btn-primary" type="submit">Search</button> -->
</form><!-- end form -->
</div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->
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 am trying to make a search-bar that looks like :
But the following HTML snippet gives a search-bar that looks something like :
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</nav>
How could I make the size of search-bar same as that of the button?
<nav class="navbar navbar-default navbar-inverse">
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</form>
</nav>
You need to use Bootstrap's input group class and put your button appropriately inside it.
HTML CODE:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
Any problem See this tutorial http://bootsnipp.com/snippets/featured/search-panel-with-filters