I'm using Bootstrap v4 and bootstrap-select js/css (in ASP.NET MVC project) and I have a problem in my form
. The select
with multiple
options from bootstrap-select
is wider than the rest of my inputs
, even though it's in a div
with class="form-control"
.
The output looks something like this:
As you can see, Field Of Expertise dropdown
is way larger then the rest of the inputs
. I tried to edit bootstrap-select.css
and change width:auto
, but didn't work. Is there anything I can do to match the width
of my other inputs
?
My code looks something like this
<div class="form-group">
@Html.LabelFor(v => v.BirthDate)
@Html.TextBoxFor(v => v.BirthDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(v => v.BirthDate)
</div>
<div class="form-group">
@Html.LabelFor(v => v.ResidenceCountry)
@Html.TextBoxFor(v => v.ResidenceCountry, new { @class = "form-control" })
@Html.ValidationMessageFor(v => v.ResidenceCountry)
</div>
<div class="form-group">
@Html.LabelFor(m => m.CurrencyId)
@Html.DropDownListFor(m => m.CurrencyId, new SelectList(Model.Currencies, "Id", "Name"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.CurrencyId)
</div>
<div class="form-group">
@Html.LabelFor(m => m.FieldOfExpertiseIds)
@Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" })
@Html.ValidationMessageFor(m => m.FieldOfExpertiseIds)
</div>
UPTADE:
I changed now the form-group to something like this (added @data_width = "auto"
):
<div class="form-group">
@Html.LabelFor(m => m.FieldOfExpertiseIds)
<br />
@Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" , @data_width="auto" })
@Html.ValidationMessageFor(m => m.FieldOfExpertiseIds)
</div>
You better try using data-width
attribute to set the width of the select.
Set data-width
to auto
to automatically adjust the width of the select to its widest option. fit
automatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g. 300px
or 50%.
So I will suggest you to use something like this
<select class="selectpicker" data-width="100%">
...
</select>
So in your case better use - data_width = "100%"
and if its wider, then change the width as per your need e.g., 75%
or 50%.
I hope this was helpful for you.