web-dev-qa-db-fra.com

Select2 Select dans Bootstrap Modal

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

J'utilise jquery 1.11.2, select2-4.0.0-beta.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 appeler $('#products').select2(); Le plugin fonctionne très bien ailleurs. Mais c'est foutu dans un modal:

http://imgur.com/rzcTVTD

Mise à jour: le violon (non) actif ici http://jsfiddle.net/Strernd/o0d3vtek/

twitter-bootstrap-3modal-dialogjquery-select2
10
Strernd

Le problème que vous rencontrez est que, lorsque Select2 est lié à la sélection, l'étendue générée 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 le width: 100px codé en dur qui force le texte à être "divisé". Vous pourriez penser "pourquoi diable?!" et la réponse est certainement: 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;
}

    Jetez un coup d'oeil à ce jsfiddle qui fonctionne (j'ai ajouté des classes col-xs à votre étiquette et un autre div). Attention, cette solution fonctionne tant que vous avez assez de largeur pour votre texte. Si la largeur est plus petite que le texte, vous aurez le même problème et vous devrez ajuster le CSS pour ajouter overflow: auto; et text-overflow: Ellipsis;.

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

24
Luís Cruz
span.select2-container {
    z-index:10050;
}

ne fonctionne pas lorsque select2 est en dehors du modal.

EDIT

J'ai trouvé que ce serait une meilleure solution lors de l'utilisation de select2 dans Bootstrap Modal et en dehors d'eux.

.select2-container--open{
        z-index:9999999         
    }
6
dannyzar

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

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

Vous pouvez utiliser ce link lorsque vous voulez utiliser select2 en modal:

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