1. Home
  2. Forum
  3. jQuery
  4. Select2 not working in ejDialog

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.
Up arrow icon