web-dev-qa-db-fra.com

Comment rendre les zones de recherche select2 v4 sensibles dans la barre de navigation de bootstrap 3?

J'ai placé des zones de recherche select2 dans une barre de navigation bootstrap 3. Le problème est que lorsque je redimensionne le navigateur, les zones de recherche ne se redimensionnent pas automatiquement et que la barre de navigation déborde. On ne sait pas trop comment rendre les zones select2 sensibles.

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 masquées si la largeur n'est pas suffisamment longue et ne seront pas affichées. Ce que j'aimerais, c'est que les zones de recherche soient réactives, de sorte que leur largeur soit redimensionnée 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>

Merci

twitter-bootstraptwitter-bootstrap-3jquery-select2jquery-select2-4
15
vgoklani

Je ne suis pas sûr de comprendre ce que vous voulez faire.

Pouvez-vous essayer ceci:

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}
30
Seb33300

Cela fonctionne pour moi:

$(window).resize(function() {
    $('.select2').css('width', "100%");
});

10
Filipe Daniel

Vous pouvez résoudre ce problème en définissant l'attribut data- *:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>
9
lexxl

J'utilise select 2 version 4, avec bootstrap 3, le select 2 est responsive sans code.

Attention, si vous ouvrez une page avec select 2 et que vous la redimensionnez, la taille de select 2 ne changera pas et vous pouvez penser qu'elle n'est pas réactive. Quoi qu’il en soit, si vous actualisez votre page dans une nouvelle taille, vous verrez que la sélection 2 s’intégrera correctement dans la page.

En effet, select 2 rend ses composants et calcule les tailles à la fin du document. Ne les actualisez pas lorsque vous redimensionnez la page. Ceci est tout à fait acceptable car nous ne nous attendons pas à ce que l'utilisateur final change la taille de son navigateur (c'est ce que nous faisons habituellement lors du développement pour le test!)

Selon mon expérience, si vous modifiez manuellement la largeur de select 2, vous pouvez rencontrer des situations dans lesquelles la liste déroulante select2 ne rentre pas exactement en haut ou sur le bouton du conteneur sélectionné.

Certains css ne sont nécessaires que lorsque votre site est parcouru par un mobile et que l'utilisateur peut faire pivoter l'écran en faisant pivoter son mobile. 

Dans ce qui suit, css peut aider, car il redimensionnera la sélection 2 en considérant les colonnes d'amorçage:

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}
6
Alireza Fattahi

Une chose que select2 fait est de définir une largeur fixe pour les éléments qu’elle génère afin qu’elle ne soit pas réactif par défaut. 

En utilisant un peu de JavaScript, vous pouvez définir la largeur de chaque élément <select> dans l'événement $(window).resize(), puis réinitialiser le plug-in select2. 

Remarque: pour que les éléments répondent, vous ne pouvez pas définir une largeur fixe (par exemple 400px) mais définir une largeur de fluide. Dans mon exemple, je suppose que chaque sélection aura une largeur égale à un tiers de la largeur du corps. 

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2({
    data: data
});

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() {
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2({
        data: data
    });
});

Ici est une démo de travail.

2
Tasos K.

ajoutez ci-dessous css et faites référence au dernier de vos fichiers html

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
1
Tejas Bhatt

Vous devez essayer d'appliquer col- au champ de saisie? comme ceci "multiple" id="Search1" style="height:34px"></select>

1
Akhil Namboothiri

Javascript: 

$("#myid").select2({
   width:'100%'
});
0
Aruna Warnasooriya

Son juste un échantillon et vous pouvez le rendre plus propre si vous aimez et le numéro est le nom de classe que j'ai donné à select2

$screenWidth=$(this).width();

function checkWindowWidth() {
 if($screenWidth<767){
 }

 if(991>$screenWidth && $screenWidth>768){
    $('.number',.number+span).css('width','100%');
 }

 if($screenWidth<1199 && $screenWidth>992){
    $('.number,.number+span').css('width','45%');
 }

 if($screenWidth>1199){
    $('.number,.number+span').css('width','33%');   
 }
}
0
Alisanie

Comme déjà indiqué par Alireza Fattahi, select2 v4 avec le thème bootstrap est déjà réactif, en quelque sorte. Pour gérer le problème de redimensionnement du navigateur, vous pouvez réinitialiser select2 sur l'événement de redimensionnement.

    $(window).resize(function () {
        $("select").select2();
    });

Après avoir vérifié cela de plus près, j'en suis venu à la conclusion que vous ne voulez pas réinitialiser les contrôles select2. C'est exagéré et si vous ne prenez pas soin de le réinitialiser exactement de la même manière qu'il a été créé, cela ne fonctionnera pas comme prévu. 

Ce que j’ai trouvé, c’est que puisque je place les contrôles dans un conteneur sensible, tout ce que je devais faire était de supprimer la largeur en ligne du conteneur select2 après l’initialisation du contrôle. Dans la mesure où je l'ai testé, il n'est pas non plus nécessaire de gérer l'événement de redimensionnement de la fenêtre.

    //Initialize select2
    $("select").select2({
       //your options
    });

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");
0
rjax