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 the body. Just add typeaheadAppendToBody attribute along with other typeahead attributes:
typeahead-append-to-body="true"