We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Select2 not working in ejDialog

Hi Syncfusion team!


I have just face a problem using ejDialog in Javascript that I can`t solve by myself. I have a <select> html tag inside my ejDialog which doesn`t shown its dropdown list with <option> tags after I initialize select2 on it. Concretely if I click on my <select> html object then the list is sliding down in the end of the ejDialog and not in the front. If I resize my ejDialog I can see my select`s list in the back of my Dialog. Without select2 it works fine, so my question is: is there a way to use select2 correctly with ejDialog in Javascript? I am using Syncfusion version 13.2.0.29 and Select2 version 4.0.0.

My ejDialog declaration in JavaSctipt is:

$("#editForm").ejDialog({
        showOnInit: false,
        enableModal: true,
        width: 500,
        allowDraggable: true,
        showHeader: true,
        enableResize: true,
        enabled: true,
        showRoundedCorner: true,
        actionButtons: ["close", "collapsible", "minimize", "pin"]
    });
HTML:
<div id="editForm" title="...">
      .....
                 <select class="myselect" style="width:200px;">
                            <option value="2">1231</option>
                            ....
                  </select>
</div>

And finally I have a simple select2 initializer:

$(".myselect").select2();

Thanks in advice: Daniel


3 Replies

HP Harikrishnan P Syncfusion Team August 31, 2015 01:13 PM UTC

Hi Feldman,

Thanks for contacting Syncfusion support.

The cause of the reported problem (“select-2 Dropdown menu not displayed within EJ Dialog”) is, z-index not set for select2 Dropdown menu. Z-index is calculated and set for EJ dialog wrapper to make it appear in front of the page. Usually while opening the popup menu, z-index will be calculated and set to make it appear in front. But select2 dropdown menu doesn’t have z-index so it is not visible in the page. To resolve this problem, we need to calculate the z-index of the EJ dialog in the “open” and “dragStop” events and apply a z-index with higher value to the select2 dropdown. We have prepared an example to showcase your requirement kindly check with it.

http://jsplayground.syncfusion.com/zpmgogn3

If still you face any difficulties kindly get back to us and we will be happy to help you.

Regards,
HariKrishnan


FD Feldman Daniel September 1, 2015 07:52 AM UTC

With few modifications in order to fit the code to my HTML finally it works great. 

Thank you Harikrishnan!



HP Harikrishnan P Syncfusion Team September 2, 2015 03:48 AM UTC

Hi Feldman,
 
Thanks for your update. Please get back to us if you need further assistance.
 
Regards,
HariKrishnan

Loader.
Live Chat Icon For mobile
Up arrow icon