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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Select2 not working in ejDialog

Thread ID:

Created:

Updated:

Platform:

Replies:

120061 Aug 27,2015 07:41 AM UTC Sep 2,2015 03:48 AM UTC JavaScript 3
loading
Tags: ejDialog
Feldman Daniel
Asked On August 27, 2015 07:41 AM UTC

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


Harikrishnan P [Syncfusion]
Replied On 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

Feldman Daniel
Replied On 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!


Harikrishnan P [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;