Bootstrap 3 multiselect plugin as form element

Question

I'm trying to add multiselect plugin to my form. I've managed to get everything working just fine (http://jsfiddle.net/Misiu/t2qaP/), but I would like to get that select to be 100% width.
I can add css by hand:

 .btn-group, .btn-group .multiselect {
    width: 100% !important;
}

but maybe there is better way of doing this with bootstrap?

here is my demo: http://jsfiddle.net/Misiu/t2qaP/

Answer 1

Again hello ;) See

UPDATED

http://jsfiddle.net/t2qaP/13/

select.multiselect,
select.multiselect + div.btn-group,
select.multiselect + div.btn-group button.multiselect,
select.multiselect + div.btn-group.open .multiselect-container{
    width:100% !important;
}

UPDATED 2 You need to add buttonClass to multiselect options. But why do it? Looks so good. http://jsfiddle.net/t2qaP/14/

$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonClass: 'form-control'
});

Answer 2

You might want to use buttonWidth option if you do not wish to modify css. See below example.

$('.multiselect').multiselect({
    includeSelectAllOption: true,
    buttonWidth: '411px'// here you need to specify width value
});

Demo Fiddle