I was trying to use jquery-tokeninput (awesome!) with Twitter's Bootstrap-modal window and noticed there's an issue with the popups not showing. It appears to be a z-index related issue.
This is indeed a z-index issue since the twitter's bootstrap modal sets a z-index of 10000 to the backdrop overlay + modal dialog, and the token-input dropdown has a z-index of 999
If you want to check out my fork of jquery-tokeninput, I believe I may have fixed this problem in one of my commits, among other goodies and bug fixes. Tell me what you think :)
Thank you for this. I was going crazy trying to change z-index only in the provided CSS and not being able to see the results. Totally forgot most elements are created on-the-fly with their own z-index. I suppose this didn't make it into master yet. Does anyone know why?
It's in the master, I created a pull request for it. Change the z-index by adding the
Thank you @anroots.
I'm using the version 1.6.0 downloaded from http://loopj.com/jquery-tokeninput/,
I followed http://railscasts.com/episodes/258-token-fields?view=asciicast to implement it into my app, and now i have the same issue with bootstrap modal, when i look into the js source file I can't find the line containing "zindex", adding it wont fix the problem also.
Also using the master version didn't work when following Ryan approach.
hey @subroot, apparently now the zIndex is a configuration option of the plugin instead of hardcoded into the js file. So to configure it you should do something like this:
Check this commit if you want to see it in the code.
Hope that helps,
Thank you @vitorbal, that did the trick :)
This thread is helping me a lot... but i am having a weird issue that tokenized search list is when appears is hidden under the popup and is not visit to user. Can someone please help me in how to show the list on the top of the popup.
just go to token input stylesheet and change z-index in div.token-input-dropdown to z-index 11001 it will fix the problem
@honavarsohaan thanks a lot. It solved my problem :)
Easier way is to put the following code in your css which is going to override the existing one.
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
I tried zindex: 1051 and it seems to be enough to fix the problem (I don't want to raise z-index unnecessarily high). I am not sure if I get bitten by bootstrap later though.