définir la largeur de l'entrée select2 (via la directive Angular-ui)
-
12-12-2019 - |
Question
J'ai du mal à faire fonctionner ce plunkr (select2 + angulat-ui).
http://plnkr.co/edit/NkdWUO?p=preview
Dans la configuration locale, j'obtiens le travail select2, mais je ne peux pas définir la largeur comme décrit dans le documents.Il est trop étroit pour être utilisé.
Merci.
MODIFIER:Peu importe, j'ai trouvé un violon qui fonctionne icihttp://jsfiddle.net/pEFy6/
Il semble que le comportement de select2 soit de se réduire à la largeur du premier élément.Je pourrais définir la largeur via bootstrap class="input-medium"
.Je ne sais toujours pas pourquoi angulaire-ui ne prend pas de paramètres de configuration.
La solution
Vous devez spécifier la largeur de l'attribut à résoudre afin de préserver la largeur de l'élément
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
Autres conseils
Dans mon cas, le select2 s'ouvrirait correctement s'il y avait zéro ou plusieurs pilules.
Mais s’il y avait une ou plusieurs pilules et que je les supprimais toutes, elles seraient réduites à la plus petite largeur.Ma solution était simplement :
$("#myselect").select2({ width: '100%' });
C'est une vieille question mais de nouvelles informations méritent toujours d'être publiées...
À partir de Select2 version 3.4.0, il existe un attribut dropdownAutoWidth
qui résout le problème et gère tous les cas étranges.Notez qu'il n'est pas activé par défaut.Il se redimensionne dynamiquement à mesure que l'utilisateur effectue des sélections, il ajoute de la largeur pour allowClear
si cet attribut est utilisé, et il gère également correctement le texte d'espace réservé.
$("#some_select_id").select2({
dropdownAutoWidth : true
});
select2 V4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
Avec > 4.0 de select2 j'utilise
$("select").select2({
dropdownAutoWidth: true
});
Ces autres n'ont pas fonctionné :
- liste déroulanteCssClass :'Grosse baisse'
- largeur:'100%'
- largeur:'résoudre'
ajoutez le conteneur de méthodes css dans votre script comme ceci :
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
il définira la largeur de votre sélection de la même manière que la largeur de votre div.
Définir la largeur sur « résoudre » n’a pas fonctionné pour moi.Au lieu de cela, j'ai ajouté "width:100%" à ma sélection et modifié le CSS comme ceci :
.select2-offscreen {position: fixed !important;}
C'était la seule solution qui a fonctionné pour moi (ma version est 2.2.1) Votre sélection prendra tout l'endroit disponible, c'est mieux que d'utiliser
class="input-medium"
depuis bootstrap, car la sélection reste toujours dans le conteneur, même après avoir redimensionné la fenêtre (responsive)
Vous pouvez essayer comme ça.Ça marche pour moi
$("#MISSION_ID").select2();
Sur demande hide/show ou ajax, il faut réinitialiser le plugin select2
Par exemple:
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
Solution CSS plus simple indépendante de select2
//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />
//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}
.input-xsm {
width: 60px!important; //for 4 digits
}
.input-sm {
width: 100px!important; //for short options
}
.input-md {
width: 160px!important; //for medium long options
}
.input-lg {
width: 220px!important; //for long options
}
.input-xlg {
width: 300px!important; //for very long options
}
.input-xxlg {
width: 100%!important; //100% of parent
}
Ajoutez l'option de résolution de largeur à votre fonction select2
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
Après avoir ajouté le CSS ci-dessous à votre feuille de style
.select2-container {
width: 100% !important;
}
Cela réglera le problème
Sur un projet récent construit en utilisant Amorçage 4, j'ai essayé toutes les méthodes ci-dessus mais rien n'a fonctionné.Mon approche consistait à éditer le bibliothèque CSS en utilisant jQuery obtenir 100% sur la table.
// * Select2 4.0.7
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});
//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
Fonctionnement Démo
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%',//Doens't work
width: 'resolve'
});
//Fix the above style width:100%
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col" class="w-50">#</th>
<th scope="col" class="w-50">Trade Zones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
multiple="multiple">
<option value="1">One</option>
<option value="1">Two</option>
<option value="1">Three</option>
<option value="1">Okay</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>