Adjusting z-index of angularjs typeahead directive

Question

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;
 }

Answer 1

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