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.

Chaotic

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
  });

Khanate

Thank you very much for your response Ralph Allen. – Chaotic

Just an additional note you are correct about the link below, it did not work in my case as well.github.com/loopj/jquery-tokeninput/issues/190 – Chaotic

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.

Sourwood