Form input above autocomplete list

@Ramonsan wrote:

I want to add a typehead style autocomplete input in my form, like Angular Material <md-autocomplete>, I was using ion-autocomplete from guylabs, but I prefer MD way instead poping a modal.

Everything is fine with my autocomplete but with input fields below. If there is a input field below, the suggestions list appears below input fields, and I can not click suggestions because the input get focus. Outside the form autocomplete work as expected.

I played with z-index. Default ionic input z-index is 2 i guess looking ionic.app.css. I tried with 3, 10, 9999, but with same result. If I comment the include of ionic.app.css losing ionic css, autocomplete works fine.

There is autocomplete css:

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

Posts: 1

Participants: 1

Read full topic