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

J'ai le problème de cette plunkr (select2 + angulat-ui) de travail.

Dans les locaux de l'installation, je reçois le select2 travail, mais je ne peux pas régler la largeur, comme décrit dans le docs. Il est trop étroit pour être utilisé.

Merci.

EDIT:
Jamais l'esprit que plnkr, j'ai trouvé un travail violon ici
http://jsfiddle.net/pEFy6/

On dirait que c'est le comportement de select2 à l'effondrement de la largeur du premier élément. J'ai pu régler la largeur par bootstrap class="input-medium" .Toujours pas sûr de savoir pourquoi angular-ui ne prend pas de paramètres de config.

Pouvez-vous être plus précis aussi loin que vous l'avez déjà essayé? L'élu de la bibliothèque (sur lequel select2 est basé) va générer une largeur en fonction de la largeur prévue dans le code HTML/CSS.

InformationsquelleAutor bsr | 2012-10-02

202

Vous devez spécifier l'attribut largeur à résoudre afin de préserver l'élément de largeur
```
$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
```
- Joyau caché là
- $("#myselect").select2({ espace réservé: 'Sélectionner', width: '192px' }); résolu mon problème avec IE et n'ont aucun effet sur FF et Chrome! Merci!
- Ne fonctionne pas sous IE.
- Merci beaucoup, c'est génial !
- N'a pas fonctionné pour moi 🙁
- ne fonctionne pas pour moi
- oui. J'ai également demandé à l'auteur de github.com/godbasin/vue-select2/issues/11
- ne fonctionne plus
InformationsquelleAutor Diego Alvarez
198

Dans mon cas, le select2 serait d'ouvrir correctement si il était de zéro ou plus de pilules.

Mais s'il y a une ou plusieurs pilules, et j'ai supprimé toutes, cela permettrait de réduire à la plus petite largeur. Ma solution était simple:
```
$("#myselect").select2({ width: '100%' });      
```
- meilleure réponse quand à l'aide de select2 version 4.0.0
- cela a bien fonctionné pour moi.
- ^ Ce. Meilleure réponse 🙂
- pourquoi c'est mieux que $("#myselect").select2({ width: 'résoudre' }); ? (semble être le même)
- largeur:'résoudre' ne fonctionne qu'une fois sur chargement de la page mais pas sur redimensionner. Si votre e responsive conceptions, il ne marche pas faire l'affaire
- resolve n'a pas de travail pour moi - 100%` a fait. c'est une demi-heure désespérément à la recherche d'une réponse "résolu". merci 🙂
- sauvé ma journée!!!
- C'est la meilleure réponse à ce jour. Mais maintenant, pour moi, le champ de recherche de ne pas remplir toute la largeur. Un moyen facile de remédier à cela?
- merci. il a travaillé.
InformationsquelleAutor portforwardpodcast
45

C'est une vieille question, mais de nouvelles informations est encore la peine de poster...

De départ avec Select2 version 3.4.0 il y a un attribut dropdownAutoWidth qui résout le problème et s'occupe de toutes les impair cas. Remarque il n'est pas activé par défaut. Il redimensionne de manière dynamique lorsque l'utilisateur effectue des sélections, il ajoute à la largeur de allowClear si cet attribut est utilisé, et il gère l'espace réservé de texte correctement aussi.
```
$("#some_select_id").select2({
    dropdownAutoWidth : true
});
```
- Exactement ce que je cherchais. Je vous remercie.
- Un seul qui a fonctionné pour moi
- Un seul qui a fonctionné pour moi, en tant que bien.
- Très utile. Merci!
- Il fonctionne très bien... sauf si vous êtes en utilisant des paramètres, si vous, si vos options sont plus petit que l'espace réservé, le texte sera tronqué 🙁
InformationsquelleAutor Shep
21

select2 V4.0.3
```
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
```
- cela devrait être maintenant la bonne réponse
- vous sauver ma journée bro @sadée
InformationsquelleAutor Sadee
7

ajouter de la méthode contenant du css dans votre script comme ceci :
```
$("#your_select_id").select2({
      containerCss : {"display":"block"}
});
```
il va configurer votre sélectionnez la largeur de même que la largeur de votre div.
- Cela a fait l'affaire pour moi (je ne pouvais pas obtenir select2 pour redimensionner automatiquement avec Bootstrap 3). Bien que j'ai à dire c'est un peu hacky.
- Ce jeu me sur la bonne voie, j'ai remplacé l'écran avec minWidth: $( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
InformationsquelleAutor atuk
7

Avec > 4.0 de select2 je suis en utilisant
```
$("select").select2({
  dropdownAutoWidth: true
});
```
Ces autres n'ont pas de travail:
- dropdownCssClass: 'bigdrop'
- largeur: '100%'
- largeur: 'résoudre'
InformationsquelleAutor sobelito
2

Réglage de la largeur à "résoudre" ne fonctionne pas pour moi.
Au lieu de cela, j'ai ajouté "width:100%" à mon sélectionner, 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)
Sélectionnez votre va prendre toute la place disponible, c'est mieux que d'utiliser

class="input-medium"

de bootstrap, parce que la sélection est toujours en restant dans le récipient, même après le redimensionnement de la fenêtre (responsive)
- Merci pour la solution mais il n'a travaillé que pour moi, sur la première charge. Une fois j'ai choisi une balise et clique ensuite sur un autre élément de la page le select2 d'entrée est allé de nouveau à la mauvaise taille
InformationsquelleAutor helene

Vous pouvez essayer comme ça. Il fonctionne pour moi

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

Sur afficher/masquer ou à une requête ajax, nous avons réinitialiser le select2 plugin

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();
    }
});

InformationsquelleAutor Bablu Ahmed

Plus facile CSS indépendante de la solution 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   
}

InformationsquelleAutor Adrian P.

0

Ajouter la largeur de résoudre l'option de votre select2 fonction
```
$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
```
Après ajouter ci-dessous les CSS à votre feuille de style
```
.select2-container {
width: 100% !important;
}
```
Il permet de trier la question

InformationsquelleAutor Ravindu Lokumanna

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 était en éditant le 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")

De Travail Démo

JS:

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

HTML:

<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>

InformationsquelleAutor Abdelsalam Shahlol

Vous devez vous connecter pour publier un commentaire.