Bootstrap-Select width in form

user_4645310 0
Viewed 37644

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: enter image description here

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: enter image description here

asp.net-mvc-5 bootstrap-select twitter-bootstrap razor css
2 Answers

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.

user_76297140

I was able to get it to work once I straightened out some external dependencies. One thing to pay attention to is the versions required. JQuery 1.8.0+ and bootstrap version 4 didn't work for me. I was able to get it to work with 3.3.6.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
  </head>

  <body class="container">

      <div class="form-group">
        <label for="test0">test</label>
        <input id="test0" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label for="test1">drop down</label>
        <select id="test1" class="form-control" type="text">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
          </select>
      </div>
      <div class="form-group">
        <label >test 1</label>
        <select id="test2" class="selectpicker form-control" multiple>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>
      </div>
  </body>

</html>

Check out the Plunker example

user_9069550
Related