web-dev-qa-db-fra.com

select2 non sensible, largeur supérieure à celle du conteneur

J'ai un problème avec la largeur d'un menu déroulant select2 dans ma page ASP.NET. Lorsque j'essaie d'afficher la page avec l'écran de l'émulateur de périphériques Chrome, le select2 est plus grand que le div qui le contient et, à droite, il sort de l'écran. J'ai vu avec l'inspection de code qu'il ajoute automatiquement un attribut de style style="width: 498px;" dans l'élément <span class="select2 select2-container select2-container--bootstrap select2-container--below"> que je n'ai défini nulle part. La seule opération que j'ai effectuée consiste à définir $("#ContentPlaceHolderContent_mySelect").select2(); dans la fonction document.ready (). Ma liste déroulante select2 est contenue dans un bloc:

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>

Comment puis-je supprimer cette option style = "width"?

javascriptjqueryhtmlcsstwitter-bootstrap
8
Alfredo Torre

Select2 ajoute la classe .select2. Vous pouvez remplacer le script en utilisant css . Ici, je suis configuré pour que select2 ait 100% width, en utilisant !important. Si je ne le fais pas, select2 aurait une largeur de 24px.

Vous pouvez personnaliser davantage les classes que select2 génère en utilisant certains principes.

$(document).ready(function(){
$("#mySelect").select2();
});
.select2 {
width:100%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>

22
Vlado Pandžić

Cela fonctionne pour moi:

$('select').select2({
    width: '100%'
});

et ajoutez CSS:

.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; Word-break: break-all; }

Ajoutez au CSS "! Important" si vous avez besoin.

8
Mario62RUS

Vous n'avez pas besoin d'utiliser !important, vous pouvez simplement le remplacer par max-width comme:

.select2{
    max-width: 100%;
}
1
gdfgdfg

Le <span> avec la classe .select2 est créé par le plugin Select2 juste après la création d'un nouveau select2 sur un <select> donné.

Pour rendre cet élément span.select2 sensible, nous pouvons avoir quelques possibilités, telles que:

  1. Utilisez un% width (soit sur l'original avant de créer l'élément select2, soit dans l'option de configuration select2 width ).
  2. Remplacer via CSS (par exemple, lorsque nous utilisons des requêtes @media()). Notez que cela peut affecter la fonctionnalité ou l'affichage du plug-in.

Pour le second, nous pouvons utiliser le combinateur de fratrie adjacent (+) avec le !important sur la valeur de largeur pour styliser le <span> de notre select2, étant donné que l'envergure du select2 est créée et insérée juste après notre <select>.

Un exemple ci-dessous:

@media (max-width: 400px) {
  select.my-x-select + span.select2 {
    width: 200px !important;
  }
}

Remarque: Les sélecteurs d'élémentsselect et span ne sont pas nécessaires, @media à titre d'exemple.

0
edmundo096