Clicks on div over an input in Ionic

2019-07-25 11:22发布

问题:

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