Bootstrap-Wählen Sie die Breite in form
Ich bin mit Bootstrap v4 und bootstrap-select js/css (in ASP.NET MVC-Projekt) und ich habe ein problem in meinem form
. Die select
mit multiple
Optionen aus bootstrap-select
breiter ist als der rest meines inputs
, obwohl es in einem div
mit class="form-control"
.
Die Ausgabe sieht ungefähr so aus:
Wie Sie sehen können, Fachgebiet dropdown
ist viel größer, dann wird der rest der inputs
. Ich habe versucht, zu Bearbeiten bootstrap-select.css
und ändern width:auto
, aber hat nicht funktioniert. Gibt es irgendetwas, was ich tun kann, um dem match die width
meiner anderen inputs
?
Mein code sieht ungefähr so aus
<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>
Updaten Sie:
Ich jetzt geändert, die form-Gruppe etwas wie dies (Hinzugefügt @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>
Und jetzt sieht es ein bisschen besser, aber immer noch ein problem:
- Nicht vertraut mit "selectpicker". Kommt das von einem Drittanbieter-Bibliothek?
- Ja, silviomoreto.github.io/bootstrap-select
Du musst angemeldet sein, um einen Kommentar abzugeben.
War ich in der Lage, um es zu arbeiten, sobald ich richtete einige externe Abhängigkeiten. Eine Sache zu achten, ist die Versionen erforderlich. JQuery 1.8.0+ und bootstrap-version 4 nicht für mich arbeiten. Ich war in der Lage, get it to work mit 3.3.6.
Check-out die Plunker Beispiel
Du besser versuchen mit
data-width
- Attribut legen Sie die Breite der wählen Sie.Set
data-width
zuauto
zu passen sich automatisch der Breite des wählen, an seiner breitesten option.fit
passt sich automatisch der Breite des wählen Sie, um die Breite seines gerade ausgewählten option. Einen genauen Wert kann auch angegeben werden, z.B.300px
oder50%.
So, ich schlage vor, Sie verwenden so etwas wie dieses
Also in deinem Fall besser nutzen -
@data_width = "100%"
und wenn breiter, dann ändern Sie die Breite wie pro Ihre Notwendigkeit z.B.75%
oder50%.
Quelle link
Ich hoffe das war hilfreich für Sie.
-ve
bitte kommentieren Sie das Problem, das Sie konfrontiert sind, so kann ich auch verstehen, die Fehler und korrigieren Sie es. Es wird auch hilfreich sein für andere. ty