2

I am using Angularjs typeahead directive in combination with jquery layout plugin. Here is the link to the app I am working on. When I type an address into the input box, the list of autocomplete results get hidden behind the resizer. I have tried changing the z-index property of both the autocomplete list as well as the pane resizer, but nothing seems to be working. What is the best way to solve this?

.ui-layout-resizer-open {
    z-index: 1;
 }

 .dropdown-menu {
    z-index: 2;
 }
DG3
  • 5,070
  • 17
  • 49
  • 61

1 Answers1

12

You can fix this issue by telling typeahead directive to append suggestions list to the body. Just add typeaheadAppendToBody attribute along with other typeahead attributes:

typeahead-append-to-body="true"

Demo: http://plnkr.co/edit/3RlEcNgH4Pviuu6SXs6y?p=preview

dfsq
  • 191,768
  • 25
  • 236
  • 258