Bootstrap-Select width in form

Question

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>

And now it looks a little bit better, but still a problem:

Answer 1

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%.

Source link

I hope this was helpful for you.