Bootstrap-Sélectionnez la largeur dans la forme

J'utilise Bootstrap v4 et bootstrap-select js/css (dans le projet ASP.NET MVC) et j'ai un problème dans mon form. Le select avec multiple options de bootstrap-select est plus large que le reste de mon inputs, même si c'est dans un div avec class="form-control". La sortie ressemble à ceci: Bootstrap-Sélectionnez la largeur dans la forme

Comme vous pouvez le voir, Field of expertise dropdown est beaucoup plus grande que le reste de la inputs. J'ai essayé d'éditer bootstrap-select.css et de changer width:auto, mais n'a pas fonctionné. Y at-il quelque chose que je peux faire pour faire correspondre le width de mon autre inputs?

Mon code ressemble à ceci

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

Mises à Jour:

je changé maintenant la forme groupe à quelque chose comme cela (ajouté @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>

Et maintenant il semble un peu mieux, mais toujours un problème:

Source

2017-09-20 Robert

Vous n'êtes pas familier avec "selectpicker". Cela vient-il d'une bibliothèque tierce? –

Oui, https://silviomoreto.github.io/bootstrap-select/ – Robert

J'ai été capable de le faire fonctionner une fois que j'ai corrigé certaines dépendances externes. Une chose à faire attention est les versions requises. JQuery 1.8.0+ et bootstrap version 4 ne fonctionnaient pas pour moi. J'ai réussi à le faire fonctionner avec 3.3.6.

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script data-require="[email protected]" 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>

Vérifiez la Plunker example

Source

2017-09-20 07:23:49

Tu ferais mieux essayer d'utiliser data-width

data-width attribut pour définir la largeur de la sélection. Définir data-width à auto à ajuster automatiquement la largeur de la sélection à son plus large option. fitajuste automatiquement la largeur de la sélection à la largeur de son option actuellement sélectionnée. Une valeur exacte peut également être spécifiée, par exemple, 300px ou 50%.

Je vous suggère d'utiliser quelque chose comme ça

<select class="selectpicker" data-width="100%"> 
    ... 
</select>

Donc dans votre cas une meilleure utilisation - @data_width = "100%" et si son plus changer la largeur selon vos besoins, par exemple, 75% ou 50%.

Source link

J'espère e Cela a été utile pour vous.

Source

2017-09-20 07:00:56 weBBer

Bootstrap-Sélectionnez la largeur dans la forme

Répondre

Questions connexes