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;
}
You can fix this issue by telling
typeahead
directive to append suggestions list to thebody
. Just addtypeaheadAppendToBody
attribute along with othertypeahead
attributes:Demo: http://plnkr.co/edit/3RlEcNgH4Pviuu6SXs6y?p=preview