définir la largeur de l'entrée select2 (via la directive Angular-ui)


151

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 la documentation . Il est trop étroit pour être utilisé.

entrez la description de l'image ici

Je vous remercie.

EDIT: Peu importe que plnkr, j'ai trouvé un violon fonctionnel ici http://jsfiddle.net/pEFy6/

Il semble que ce soit le comportement de select2 de 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 angular-ui ne prend pas les paramètres de configuration.


Pouvez-vous être plus précis sur ce que vous avez déjà essayé? La bibliothèque choisie (sur laquelle se base select2) générera une largeur basée sur la largeur fournie dans le HTML / CSS.
Adam Grant

Réponses:


216

Vous devez spécifier la largeur d'attribut à résoudre afin de conserver la largeur de l'élément

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

7
$ ("# myselect"). select2 ({placeholder: 'Select Country', width: '192px'}); a résolu mon problème avec IE et n'a aucun effet sur FF et Chrome! Merci!
Adrian P.

Oui. J'ai également demandé à l'auteur github.com/godbasin/vue-select2/issues/11
shinriyo

232

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, cela rétrécirait à la plus petite largeur. Ma solution était simplement:

$("#myselect").select2({ width: '100%' });      

7
meilleure réponse si vous utilisez select2 version 4.0.0
Steve

1
pourquoi c'est mieux que $ ("# myselect"). select2 ({width: 'resolution'}); ? (semble être le même)
Ricardo Vigatti

1
@RicardoVigatti: width: 'résoudre' ne fonctionne qu'une seule fois au chargement de la page mais pas au redimensionnement. Si vous utilisez des designs réactifs, cela ne fait pas l'affaire
Fabian Schöner

1
resolven'a pas fonctionné pour moi - 100% «a fait. c'est une demi-heure désespérément à la recherche d'une réponse «résolue». merci :)
Darragh Enright

1
C'est la meilleure réponse à ce jour. Mais maintenant, pour moi, le champ de recherche ne remplit pas toute la largeur. Un moyen facile de corriger cela?
TNT

48

C'est une vieille question mais de nouvelles informations valent toujours la peine d'être publiées ...

À partir de Select2 version 3.4.0, il existe un attribut dropdownAutoWidthqui 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 au fur et à mesure que l'utilisateur effectue des sélections, ajoute de la largeur allowClearsi cet attribut est utilisé et gère également correctement le texte de l'espace réservé.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Cela fonctionne plutôt bien ... sauf si vous utilisez des espaces réservés, si vous l'êtes, si vos options sont plus petites que l'espace réservé, le texte de l'espace réservé sera tronqué :(
MrPowerGamerBR

24

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

11

Avec> 4.0 de select2 j'utilise

$("select").select2({
  dropdownAutoWidth: true
});

Ces autres n'ont pas fonctionné:

  • dropdownCssClass: 'bigdrop'
  • largeur: '100%'
  • width: 'résoudre'

9

ajoutez le conteneur de méthode css dans votre script comme ceci:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

il définira la largeur de votre sélection identique à la largeur de votre div.


1
Cela a fait l'affaire pour moi (je ne pouvais pas faire redimensionner automatiquement select2 avec Bootstrap 3). Même si je dois dire que c'est un peu piraté.
mkataja

Cela m'a mis sur la bonne voie, j'ai remplacé l'affichage par minWidth:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Nabil Kadimi

2

Définir la largeur sur «résoudre» ne fonctionnait pas 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 toute la place disponible, c'est mieux que d'utiliser

class="input-medium"

de bootstrap, car la sélection reste toujours dans le conteneur, même après le redimensionnement de la fenêtre (responsive)


Merci pour la solution, mais cela n'a fonctionné pour moi que lors du premier chargement. Une fois que j'ai sélectionné une balise, puis cliqué sur un autre élément de page, l'entrée select2 est revenue à la taille incorrecte
Marklar

1

Ajoutez une option de résolution de largeur à votre fonction select2

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

Après avoir ajouté ci-dessous CSS à votre feuille de style

.select2-container {
width: 100% !important;
}

Cela réglera le problème


0

Vous pouvez essayer comme ça. Ça marche pour moi

$("#MISSION_ID").select2();

Sur demande de masquage / affichage ou ajax, nous devons 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();
    }
});

0

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   
}

0

Sur un projet récent construit à l'aide de Bootstrap 4 , j'avais essayé toutes les méthodes ci-dessus mais rien n'a fonctionné. Mon approche consistait à éditer la bibliothèque CSS à l' aide de jQuery pour 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")

Démo de travail

$('.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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.