Dropdown list of TokenInput autosuggest plugin does not show on Ajax toolkit ModalPopupExtender control

Question

I am trying to use jQuery TokenInput on a modal popup (Ajax modal popup extender). The hint text and searching/no results found/drop down list of matching names does not appear when autosuggest textbox is on the popup.

If the textbox is on the regular page, it works fine.

I tried setting the z-index in the plugin call and in the js/css files to 9999 but that didn't work. In the show dropdown list function in the js, I tried changing the .appendTo("body") to other tags : "div", the ID of asp.net panel, but that didn't work either. Any other suggestions?

Thank you very much!

Here is my code

    $(document).ready(function () {

    $("#<%=txtKeyPartner.ClientID%>").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php",

                           {
                               zindex: 9999,
                               theme: "facebook",
                               hintText: "Begin typing a name.",
                               noResultsText: "No results",
                              searchingText: "Searching...",
                               contentType: "json",
                               propertyToSearch: "name",
                               jsonContainer: null,
                               method: "GET",
                               searchDelay: 3,
                               prePopulate: null,
                               processPrePopulate: false,
                               tokenDelimiter: ",",
                               tokenValue: "id",
                               allowFreeTagging: false,
                               allowTabOut: true, // was false
                               tokenList: "token-input-list-facebook",
                               token: "token-input-token-facebook",
                               tokenDelete: "token-input-delete-token-facebook",
                               selectedToken: "token-input-selected-token-facebook",
                               highlightedToken: "token-input-highlighted-token-facebook",
                               dropdown: "token-input-dropdown-facebook",
                               dropdownItem: "token-input-dropdown-item-facebook",
                               dropdownItem2: "token-input-dropdown-item2-facebook",
                               selectedDropdownItem: "token-input-selected-dropdown-item-facebook",
                               inputToken: "token-input-input-token-facebook",
                               preventDuplicates: true

                           }
                   );



    });

Answer 1

This is almost definitely a z-index problem. The z-index of the ModalPopup is 100001 (based on this demo) - so setting it to 9999 would be insufficient.

To fix this the z-index value in token-input.css for div.token-input-dropdown should be modified to be higher 1000001. You can set this through the z-index parameter, as you try in the example above.