web-dev-qa-db-fra.com

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

J'ai du mal à faire fonctionner ce plunkr (select2 + angulat-ui).

http://plnkr.co/edit/NkdWUO?p=preview

Dans la configuration locale, le travail select2 fonctionne, mais je ne peux pas définir la largeur comme décrit dans le document -docs . Il est trop étroit pour être utilisé.

enter image description here

Je vous remercie.

EDIT: Peu importe que ça se passe, j’ai trouvé un violon qui marche ici http://jsfiddle.net/pEFy6/

Il semblerait que le comportement de select2 soit réduit à 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.

csstwitter-bootstrapangularjsjquery-select2
135
bsr

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

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

Dans mon cas, le select2 s'ouvrirait correctement s'il y avait zéro pilule ou plus.

Mais s'il y avait une ou plusieurs pilules et que je les effaçais toutes, la largeur serait réduite à la plus petite largeur. Ma solution était simplement:

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

C'est une vieille question, mais de nouvelles informations valent toujours la peine d'être affiché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 impairs. Notez qu'il n'est pas activé par défaut. Il redimensionne de manière dynamique au fur et à mesure des sélections effectuées par l'utilisateur, il ajoute une largeur à allowClear si cet attribut est utilisé et il gère également correctement le texte de substitution.

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

select2 V4.0.3

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

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 comme étant la largeur de votre div.

7
atuk

Avec> 4.0 de select2 j'utilise

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

Ces autres n'ont pas fonctionné:

  • dropdownCssClass: 'bigdrop' 
  • largeur: '100%' 
  • largeur: 'résoudre'
6
sobelito

Régler la largeur pour "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 fonctionnait pour moi (ma version est la 2.2.1) Votre sélection occupera toute la place 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 le redimensionnement de la fenêtre (responsive)

1
helene

Ajoute l'option de résolution en 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;
}

Ça va régler le problème

0
Ravindu Lokumanna

Solution CSS simplifiée, indépendamment 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
Adrian P.

Sur un projet récent construit en utilisant Bootstrap 4, j'avais essayé toutes les méthodes ci-dessus mais rien ne fonctionnait. Mon approche consistait à éditer le bibliothèqueCSS en utilisant 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")

Travailler Demo

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