Comment rendre les zones de recherche select2 v4 réactives dans la barre de navigation bootstrap 3?
J'ai placé select2 champs de recherche à l'intérieur d'un bootstrap 3 barre de navigation. Le problème est quand j'ai redimensionner le navigateur, les champs de recherche n'est pas de redimensionnement automatique, et la barre de navigation finit par déborder. Il n'est pas clair à la façon de faire de la select2 boîtes de réactif.
Veuillez voir ici: https://jsfiddle.net/vgoklani/3vtrgkc7/13/
Vous devrez redimensionner la fenêtre de Résultat dans jsfiddle. Les zones de recherche sont cachés si la largeur n'est pas suffisamment long, et ne sera pas affiché. Ce que je voudrais, c'est pour les champs de recherche à être sensible, de telle sorte que leur largeur redimensionne en fonction de la largeur de la fenêtre.
<nav class="navbar navbar-dark navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
</button>
<a class="navbar-brand">NAME</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
</div>
</form>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
</div>
</form>
</div>
</div>
</nav>
Grâce
source d'informationauteur vgoklani
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas sûr de comprendre ce que vous voulez faire.
Pouvez-vous essayer ceci:
Vous pouvez résoudre ce problème en définissant des données* attribut:
Je suis à l'aide de select 2 version 4, avec bootstrap 3, sélectionnez 2 est sensible à aucun code.
Veuillez noter que si vous ouvrez une page avec le choix de 2 et de le redimensionner le sélectionner 2 taille ne changera pas et vous pouvez penser qu'elle n'est pas sensible. Comment jamais, si vous actualisez votre page dans une nouvelle taille, vous voyez que sélectionnez 2 s'adaptera correctement dans la page.
C'est parce que le choix de 2 rend ses composants et de calculer les tailles lorsque le document est terminé et ne pas les mettre à jour lorsque vous redimensionnez la page. C'est tout à fait acceptable, car nous ne nous attendons pas à l'utilisateur final de modifier sa taille du navigateur (c'est ce que nous avons l'habitude de le faire au cours du développement pour le test! )
Que mon expérience si vous modifiez le sélectionner 2 largeur manuellement , vous pouvez trouver des situations que l'select2 déroulant ne rentre pas exactement dans le haut ou le bouton de sélectionner le conteneur.
Le seul cas dans lequel un peu de css est nécessaire, c'est quand votre site est parcouru par un mobile et l'utilisateur peut faire pivoter l'écran en tournant son mobile.
Dans ce css ci-dessous peut aider, car il permettra de redimensionner le sélectionner 2 en considérant bootstrap colonnes:
Une chose que select2 n'est de définir une largeur fixe les éléments qu'il génère donc par défaut il n'est pas réactive.
À l'aide d'un peu de JavaScript, vous pouvez définir la largeur de chaque
<select>
élément sur la$(window).resize()
événement, puis réinitialiser le select2 plugin.Note: pour les éléments à être sensible vous ne pouvez pas définir une largeur fixe (ex: 400px), mais de définir un fluide largeur de la place. Dans mon exemple, je suppose que chaque sélectionnez aura une largeur égale à un tiers de la largeur du corps.
Ici est un travail de démonstration.
Ont essayé d'appliquer
col-
champ de saisie? comme ce"multiple" id="Search1" style="height:34px"></select>
ajouter ci-dessous les css et de référence à la dernière de vos html
C'est juste un exemple et vous pouvez le rendre plus propre si vous le souhaitez et le nombre est le nom de la classe que j'ai donné à select2
Javascript :
Comme l'a déclaré Alireza Fattahi, select2 v4 avec le bootstrap thème est déjà sensible, en quelque sorte. Pour gérer le navigateur d'un problème de redimensionnement vous pouvez réinitialiser select2 sur l'événement resize.
Après cette vérification en outre, je suis venu à la conclusion que vous ne voulez pas réinitialiser le select2 contrôles. C'est exagéré, et si vous ne faites pas attention à réinitialiser exactement de la même manière qu'elle a été créée, il ne fonctionnera pas comme prévu.
Ce que j'ai trouvé depuis que je suis en plaçant les contrôles dans un réactif contenant tout ce que j'avais à faire était de se débarrasser de la ligne de largeur dans le select2 le conteneur après le contrôle avait été initialisé. Aussi loin que je l'ai testé il ya aussi pas besoin de gérer la fenêtre de l'événement de redimensionnement.