I am implementing a typehead input for autocomplete the data if a customer exist in DB. Works fine except if there is a form with inputs below. The inputs overlaps the div and I can not choose the typehead suggestions because I focus input.
In ionic CSS, inputs have z-index: 2, and the ul of typehead has z-index:10. I tried with several values of z-index included 9999, but with same result, as you can see in the images.
There is the CSS of typehead:
.autocomplete{
width: 100%;
position: relative;
overflow: visible;
}
.autocomplete input{
font-size: 1.2em;
width: 100%;
padding:0.4em;
}
.autocomplete ul{
position: absolute;
left: 32%;
top: 35px;
width: 68%;
z-index: 10;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.autocomplete li{
text-align: left;
list-style:none;
width: 100%;
padding:0.4em;
background-color: #fff;
}
.autocomplete li.active{
width: 100%;
background-color: #2196F3;
color: #fff;
}
.autocomplete .highlight {
font-weight: bolder;
}
.autocomplete li.active .highlight {
font-weight: bolder;
text-decoration: underline;
color: #fff;
}