चयन 2 बूटस्ट्रैप मॉडल

Question

में चयन करें मैंने इस समस्या को कवर करने वाले पहले से ही अन्य धागे की जांच की है, लेकिन इनमें से कोई भी समाधान मेरे लिए काम नहीं करता है।

मैं jQuery 1.11.2, select2-4.0.0-beta.3 और बूटस्ट्रैप-3.3.1 का उपयोग कर रहा

मेरे मोडल ऐसा दिखाई देता है:

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

और मैं कॉल करना चाहते हैं $('#products').select2(); प्लगइन अन्य स्थानों में ठीक काम करता है।

अपडेट:: लेकिन यह एक मॉडल में बँधा हुआ है (नहीं) बेला यहाँ http://jsfiddle.net/Strernd/o0d3vtek/

Answer 1

आपको आ रही समस्या है कार्य करना है कि, Select2 चयन से आबद्ध किया जाता है, उत्पन्न अवधि है कुछ की तरह:

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

आप हार्डकोडेड width: 100px कि पाठ करने के लिए "splitted" जा बलों पर ध्यान देंगे। आप सोच रहे होंगे "क्यों नरक ?!" और प्रतिक्रिया निश्चित रूप से है: आप बीटा संस्करण का उपयोग कर रहे हैं।

आपके द्वारा इस मुद्दे को हल कर सकते हैं:

1. निम्नलिखित सीएसएस कोड के साथ width: 100% मजबूर:

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

   this working jsfiddle पर एक नजर डालें (मैं अपने लेबल और एक अन्य div करने के लिए कुछ col-xs कक्षाएं जोड़ा)। सावधान रहें कि यह समाधान तब तक काम करता है जब तक आपके टेक्स्ट के लिए पर्याप्त चौड़ाई न हो। चौड़ाई पाठ से छोटा होता है, तो आप एक ही मुद्दा होगा और आप जोड़ना overflow: auto; और text-overflow: ellipsis;

2. नवीनतम स्थिर संस्करण 3.5.2, जो this jsfiddle shows के रूप में ठीक से काम करता प्रयोग करें सीएसएस बदलाव करने की आवश्यकता होगी।

Answer 2

मैं क्या सिर्फ पेज जब आप मोडल की select2 बाहर है

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

Answer 3

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

काम नहीं करता है ऊपर इस कोड को जोड़ना था।

EDIT

मैंने पाया यह एक बेहतर समाधान हो जब बूटस्ट्रैप मोडल में और उन्हें बाहर select2 का उपयोग कर जाएगा।

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

Answer 4

आप इस link उपयोग कर सकते हैं जब आप मोडल में select2 उपयोग करना चाहते हैं:

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