Bootstrap dropdown full-width with input-group - html

Question

I'm trying to use a dropdown zone to host a custom component. however, the dropdown is not from a standard dropdown but from an input group button.
I need this because I want a jstree down there as my selection need is too complex to fit in a simple select.
Here is what I would it to be like :
I would like for the dropdown zone to be the full width of the input. I've tried setting it at 100% but it seam to do nothing. A fixed with work but would break the responsivness of the site.
Here is my HTML :
<div class="col-md-3">
<fieldset>
<legend>Options</legend>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" style="width: 300px;">
<li>
aaaa<br />
aaaa<br />
aaaa<br />
aaaa<br />
</li>
</ul>
</div>
</div>
</div>
</fieldset>
</div>
Full jsfiddle : https://jsfiddle.net/rry7hr5b/1/

Answer 1

Try this.
With Jquery.
$(document).ready(function(e) {
function customwidth()
{
var formwidth = $('.form-group').width();
$('.dropdown-menu').width(formwidth);
}
customwidth();
$(window).resize(function(e) {
customwidth();
});
});

Answer 2

I found a workaround using the .input-group-addon instead of the .input-group-btn. It's neat, because you need no plugins or jQuery whatsoever. Mind however that the whole dropdown menu requires a minimum width.
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-addon" style="padding:0; border:none; background:none">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" style="border-bottom-left-radius:0; border-top-left-radius:0">
<span class="caret"></span>
</button>
</div>
<ul class="dropdown-menu" role="menu" style="width:100%;">
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ul>
</div>
Check out this fiddle: https://jsfiddle.net/rry7hr5b/5/

Answer 3

Don't use this kind of ul li for select item to customize Select in bootstrap there is plug-in available please try this
http://silviomoreto.github.io/bootstrap-select/
and here some more link..
http://gregfranko.com/jquery.selectBoxIt.js/