jQuery Tokeninput dropdown is under Colorbox window

Question

I have got a problem with Loopj's jQuery Tokeninput inside Jack Moore's Colorbox window. The problem is that dropdown of Tokeninput shows under Colorbox window, as on screenshot below:

I think that the problem could be with this code inside tokeninput library (lines 343-347):

// The list to store the dropdown items in
var dropdown = $("<div>")
    .addClass(settings.classes.dropdown)
    .appendTo("body")
    .hide();

because it is appended to body, not to colorbox window.

Could anyone help me solve this problem?

PS. I am using this lib also outside colorbox window, so appending it to colorbox probably will be a bad idea.

Answer 1

It should be possible to fix this issue by altering the z-index of the TokenInput's dropdown.

The z-index of a Colorbox is 9999, the default value for the TokenInput is lower than that.

Depending on which TokenInput version you're using - if it supports the z-index parameter, you could alter the value with that on initialisation. e.g.

$('#myID').tokenInput("http://sourceurl.com",
                       {
                           zindex: 100001
                       }

Else if it's an earlier version, try altering the value for div.token-input-dropdown in the token-input.css file.

I've put in a pull request for this issue on GitHub, but sadly, the project now seems to have sunk back into inactivity.