jQuery Token Input (tokenize input) is not working on modal popup, list hidden under popup

Question

I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.

Try to seek help from thread below, zindex is not working. https://github.com/loopj/jquery-tokeninput/issues/190

here is the input control that i am using. http://loopj.com/jquery-tokeninput/demo.html

Thank you.

Answer 1

It works by setting the z-index manually:

$(".token-input-dropdown").css("z-index","9999")

The function given in https://github.com/loopj/jquery-tokeninput/issues/190 does not work in my coffeescript:

$('#book_author_tokens').tokenInput('/authors.json', { 
    zindex: 9999
  });

Answer 2

I think that a better solution is to add it to the css file (instead of doing it via js):

div.token-input-dropdown-facebook {           
   z-index: 11001 !important;
}

Of course, drop the "-facebook" suffix if you're using the default theme.