TokenInput plus jQuery UI Dialog conflict

Question

UPDATE This seems to no longer be an issue in latest Fx/Chrome using edge jQuery

PROBLEM: The autocomplete will be behind the dialog and if you move it, the dialog will move outside the page.

Investigation

I have already checked

Why does jquery ui dialog mangle my jquery.tokeninput.js autocomplete?

And read github requests

issue 93 Result list doesn't display properly when in jQuery-ui modal dialog and
issue 94 Dropdown positioning issues

but I still have the same issues with what I believe are the latest of everything (TokenInput JS and CSS from github jQuery TokenInput).

DEMOS AND CODE

DEMO1: how TokenInput works when jQuery UI is commented out
DEMO2: what I want to have working

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>     
<link rel="stylesheet"        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="jquery.tokeninput.js"></script>
<link rel="stylesheet" href="token-input-facebook.css" type="text/css" />

<button id="filterBut">FILTER</button>

<div id="dialog-form" title="Filter" style="border:1px solid black">
    <p class="validateTips">Enter text contained in the respective fields</p>

    <form>
    <fieldset>
        <label for="name">Field1</label><br/><input type="text" name="Flt1" id="Flt1" class="text ui-widget-content ui-corner-all" style="width:300px"/><br/><br/>
        <label for="email">Field2</label><br/><input type="text" name="Flt2" id="Flt2" value="" class="text ui-widget-content ui-corner-all" style="width:300px" />
    </fieldset>
    </form>
</div>
<script>
$(function() {  
   $("#Flt1, #Flt2").tokenInput([
      {id: 7, name: "Ruby"},
      {id: 11, name: "Python"},
      {id: 13, name: "JavaScript"},
      {id: 17, name: "ActionScript"},
      {id: 19, name: "Scheme"},
      {id: 23, name: "Lisp"},
      {id: 29, name: "C#"},
      {id: 31, name: "Fortran"},
      {id: 37, name: "Visual Basic"},
      {id: 41, name: "C"},
      {id: 43, name: "C++"},
      {id: 47, name: "Java"}
    ],{theme:"facebook"});

  $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 400,
            width: 460,
            modal: true
  });                        
  $( "#filterBut" ).click(function() {

  // suggestion from 
  // https://stackoverflow.com/questions/6669654/why-does-jquery-ui-dialog-mangle-my-jquery-tokeninput-js-autocomplete
    $("#dialog-form script").remove();
  // does not seem to change anything


    $( "#dialog-form" ).dialog( "open" );
  });

});
</script>         
              </div>     
            </div>
          </form>

score 2 · Answer 1 · answered Aug 15 '12 at 08:20

2

This is a known issue of this library (issue #94 on github). You can collect the patched files from here to fix the issue.

answered Aug 15 '12 at 08:20

Muhammad Towfique Imam

1,351
10
16

Patch files from issue # 94 fixes the issue of not showing the dropdown. However, it show a vertical scrollbar on the ui dialog. – Muhammad Towfique Imam Aug 15 '12 at 18:38

score 2 · Answer 2 · answered Aug 12 '13 at 06:17

2

Change style en css for div.token-input-dropdown and replaze z-index:1 with z-index:1005.

answered Aug 12 '13 at 06:17

user2192014

91
1
2

Problem is no longer there. Thanks for the input – mplungjan Aug 12 '13 at 06:29
This is the real answer – MicBehrens Oct 09 '13 at 14:37

score 0 · Answer 3 · answered Aug 15 '12 at 23:47

0

I worked on your HTML a bit and seems like setting zindex:1005 shows the dropdown over the dialog.

 ],{theme:"facebook", zindex:1005});

However, if you move the dialog, the autocomplete dropdown stays on the previous position.

answered Aug 15 '12 at 23:47

Muhammad Towfique Imam

1,351
10
16

Great - I cannot test this until mid September so it may take a while to see if what you suggest works – mplungjan Aug 16 '12 at 04:58
I have uploaded the code [here](http://pastehtml.com/view/c8ewt0pa0.html) for you to test. – Muhammad Towfique Imam Aug 16 '12 at 14:26
Thanks - in FX15 OSX, the field becomes short when I type in it and the suggestions are transparent. It seems to work better in Chrome also OSX – mplungjan Aug 16 '12 at 16:31

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

This jQuery code solves the hiding problem for me (thanks @user2192014 and this answer for the idea):

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

edited May 23 '17 at 11:51

Community

1
1

answered Jun 03 '15 at 13:01

Dennis Golomazov

16,269
5
73
81

TokenInput plus jQuery UI Dialog conflict

4 Answers4