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

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.