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, 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é.

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.

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

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%' });      

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

select2 V4.0.3

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

Avec> 4.0 de select2 j'utilise

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

Ces autres n'ont pas fonctionné:

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

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.

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)

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

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

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   
}

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>