I'm trying to get input and select option inline attached with each other like this demo using Bootstrap 2 (dead link).
Following Bootstrap 3 guidelines I manage to do this:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="form-group col-sm-5">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
</div>
<div class="form-group col-sm-3">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
It's responsive, but input and select can't be attached without some nasty css hacks. I found lot of examples with attached buttons, but that does not work with select element.
This question is related to
twitter-bootstrap
twitter-bootstrap-3
html-select
The answer is
Can be done with pure Bootstrap code.
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="form-group">_x000D_
<label for="id" class="col-md-2 control-label">ID</label>_x000D_
<div class="input-group">_x000D_
<span class="input-group-btn">_x000D_
<select class="form-control" name="id" id="id">_x000D_
<option value="">_x000D_
</select>_x000D_
</span>_x000D_
<span class="input-group-btn">_x000D_
<select class="form-control" name="nr" id="nr">_x000D_
<option value="">_x000D_
</select>_x000D_
</span>_x000D_
</div> _x000D_
</div> Based on spacebean's answer, this modification also changes the displayed text when the user selects a different item (just as a <select> would do):
http://www.bootply.com/VxVlaebtnL
HTML:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="mydropdowndisplay">Choice 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu" id="mydropdownmenu">
<li><a href="#">Choice 1</a></li>
<li><a href="#">Choice 2</a></li>
<li><a href="#">Choice 3</a></li>
</ul>
<input type="hidden" id="mydropwodninput" name="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Jquery:
$('#mydropdownmenu > li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('#mydropwodninput').val(selected);
$('#mydropdowndisplay').text(selected);
});
This is how I made it without extra css or jquery:
<div class="form-group">
<div class="input-group">
<label class="sr-only" for="extra3">Extra name 3</label>
<input type="text" id="extra3" class="form-control" placeholder="Extra name">
<span class="input-group-addon">
<label class="checkbox-inline">
Mandatory? <input type="checkbox" id="inlineCheckbox5" value="option1">
</label>
</span>
<span class="input-group-addon">
<label class="checkbox-inline">
Per person? <input type="checkbox" id="inlineCheckbox6" value="option2">
</label>
</span>
<span class="input-group-addon">
To be paid?
<select>
<option value="online">Online</option>
<option value="on spot">On Spot</option>
</select>
</span>
</div>
</div>
I know this is a bit old, but I had the same problem and my search brought me here. I wanted two select elements and a button all inline, which worked in 2 but not 3. I ended up wrapping the three elements in <form class="form-inline">...</form>. This actually worked perfectly for me.
I think I've accidentally found a solution. The only thing to do is inserting an empty <span class="input-group-addon"></span> between the <input> and the <select>.
Additionally you can make it "invisible" by reducing its width, horizontal padding and borders:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="input-group">_x000D_
<span class="input-group-addon" title="* Price" id="priceLabel">Price</span>_x000D_
<input type="number" id="searchbygenerals_priceFrom" name="searchbygenerals[priceFrom]" required="required" class="form-control" value="0">_x000D_
<span class="input-group-addon">-</span>_x000D_
<input type="number" id="searchbygenerals_priceTo" name="searchbygenerals[priceTo]" required="required" class="form-control" value="0">_x000D_
_x000D_
<!-- insert this line -->_x000D_
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>_x000D_
_x000D_
<select id="searchbygenerals_currency" name="searchbygenerals[currency]" class="form-control">_x000D_
<option value="1">HUF</option>_x000D_
<option value="2">EUR</option>_x000D_
</select>_x000D_
</div>Tested on Chrome and FireFox.
I can't seem to make that work without hacks either, so what I did was just use the drop-down menu in place of a select box and send the info through a hidden field, like so (using your code):
Jquery:
$('.dropdown-menu li').click(function(e){
e.preventDefault();
var selected = $(this).text();
$('.category').val(selected);
});
HTML:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="input-group col-sm-8">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<input type="hidden" name="category" class="category">
</div><!-- /btn-group -->
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
Not sure if that will work for what you want, but it is an option for you.
It requires a minor CSS addition to make it work with Bootstrap 3:
.input-group-btn:last-child > .form-control {_x000D_
margin-left: -1px;_x000D_
width: auto;_x000D_
}<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="form-group">_x000D_
<div class="input-group">_x000D_
<input class="form-control" name="q" type="text" placeholder="Search">_x000D_
_x000D_
<div class="input-group-btn">_x000D_
<select class="form-control" name="category">_x000D_
<option>select</option>_x000D_
<option>1</option>_x000D_
<option>2</option>_x000D_
<option>3</option>_x000D_
</select>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</div>Another different answer to an old question. However, I found a implementation made specifically for bootstrap which might prove useful here. Hope this helps anybody who is looking...
Thanks to G_money and other suggestions for this excellent solution to input-text with inline dropdown... here's another great solution.
<form class="form-inline" role="form" id="yourformID-form" action="" method="post">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-male"></i></span>
<div class="form-group">
<input size="50" maxlength="50" class="form-control" name="q" type="text">
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>
This works with Bootstrap 3: allowing input-text inline with a select dropdown. Here's what it looks like below...
Source: Stackoverflow.com