Select2 Sélectionnez dans le Bootstrap Modal

J'ai déjà vérifié les autres threads, couvrant ce problème, mais aucune de ces solutions ne fonctionne pour moi.

Je suis en utilisant jquery 1.11.2, select2-4.0.0-bêta.3 et bootstrap-3.3.1

Mon modal ressemble à ce qui suit:

<div class="modal fade" id="addProductModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Add Product</h4>
            </div>
            <div class="modal-body">

            {!! BootForm::openHorizontal(2,10)->action('/recipes/'.$recipe->id.'/product')->post() !!}

              {!! BootForm::select('Produkte: ','product_list[]' , $products)->id('products') !!}
              {!! BootForm::submit('Erstellen') !!}

              {!! BootForm::token() !!}
            {!! BootForm::close() !!}

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Et je veux l'appeler $('#products').select2();
Le plugin fonctionne très bien dans d'autres endroits. Mais il est vissé dans un modal:

Select2 Sélectionnez dans le Bootstrap Modal

Mise à jour: (Pas) de Travail violon ici http://jsfiddle.net/Strernd/o0d3vtek/

OriginalL'auteur Strernd | 2015-02-28

  1. 24

    Le problème que vous rencontrez, c'est que, quand Select2 est lié à la sélectionner, à la génération de l'échelle est quelque chose comme: 

    <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;">
    <span class="selection">
        <span class="select2-selection select2-selection--single" tabindex="0" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="select2-products-results" aria-labelledby="select2-products-container">
            <span class="select2-selection__rendered" id="select2-products-container">Mein Produkt</span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

    Vous remarquerez la codé en dur width: 100px qui force le texte à être "coupée en deux". Vous pensez peut-être "pourquoi l'enfer?!" et la réponse est certainement plus: vous utilisez une version bêta.

    Vous pouvez résoudre ce problème en:

    1. Forcer width: 100% avec le code CSS suivant:

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

      Prendre un coup d'oeil à ce travail jsfiddle (j'ai ajouté quelques col-xs classes de votre étiquette et un autre div). Méfiez-vous que cette solution fonctionne aussi longtemps que vous avez assez de largeur pour votre texte. Si la largeur est plus petite que le texte que vous aurez le même problème, et vous aurez besoin de modifier le CSS pour ajouter overflow: auto; et text-overflow: ellipsis;

    2. Utiliser la dernière version stable 3.5.2, qui fonctionne correctement que ce jsfiddle montre.

    Solutions 2 semble bon. Il est stupide d'utiliser la version bêta. Mais maintenant, j'ai ce problème i.imgur.com/wAHIpKD.png
    Puisque vous êtes en utilisant Bootstrap, vous aurez besoin de deux fichiers CSS. La commune select2.css et aditionally select2-bootstrap.min.css (voir le violon ressources). Pour plus de "Bootstrap" comme effet, jetez un oeil à cette page: fk.github.io/select2-bootstrap-css
    Merci beaucoup! Vous avez sauvé mon temps 🙂
    J'ai utilisé la solution #1 parce que j'ai eu à utiliser la version bêta, et ça fonctionne. Encore, je me demande pourquoi est-ce que 100px style codé en dur... Merci!
    Je vais avoir ce problème avec la version select2 4.0.0. Le problème se produit uniquement lorsque le <select> est au sein d'une Fondation révéler modal; si c'est n'importe où ailleurs sur la page select2 fonctionne comme prévu. J'ai remarqué width: 100px apparaît dans le rendu HTML (quand à l'intérieur de modal), mais 100px n'existe nulle part dans le code source. Il semble être généré dynamiquement, et en conflit avec l'intérieur d'un modal (bootstrap et de la fondation???). Encore, la solution n ° 1 fonctionne dans ce cas. =\

    OriginalL'auteur

  2. 5

    Ce que j'ai fait a été d'ajouter ce code juste au-dessus de la page

        span.select2-container {
    z-index:10050;
}
    Veuillez expliquer pourquoi cela fonctionne, ne vous contentez pas de "code de vidage'
    z-index est assez explication

    OriginalL'auteur

  3. 5
    span.select2-container {
    z-index:10050;
}

    ne fonctionne pas lorsque vous avez select2 à l'extérieur de l'modal.

    EDIT

    J'ai trouvé que ce serait une meilleure solution lors de l'utilisation de select2 dans le Bootstrap Modal et à l'extérieur.

    .select2-container--open{
        z-index:9999999         
    }
    m'a sauvé la vie. donc +1. merci
    Ce doit être la accepté de répondre, c'est parfait si vous r'aide d'un modal sur un autre modal. Changer seulement select2-conteneur z-index dans un désordre sur une structure robuste.

    OriginalL'auteur

  4. 0

    Vous pouvez utiliser cette lien lorsque vous souhaitez utiliser select2 modal:

    $('#my-select').select2({
    dropdownParent: $('#my-modal')
});

    OriginalL'auteur