Overlay inside a list item

ionic-v1
1

I’m trying to implement auto-complete inside a form item, where as the user types it creates a dropdown menu with a list of suggestions, which are clickable.

I’ve made a codepen to demonstrate what I want. (look at the auto-complete field, and the grey hidden box below it)

My dropdown:

<div class="input-dropdown">
  <ul class="input-dropdown-menu">
    <li>...</li>
  </ul>
</div>

My CSS:

.input-dropdown {
    position: absolute;
    background: grey;
    border: solid 1px #000;
    z-index: 1001;
    overflow: visible;
}

.input-dropdown-menu {
}

This issue is that position: absolute doesn’t allow me to overlay over the list item below the auto-complete field, as you can see in the codepen.

Here’s an example of a solution, which for some reason doesn’t work for me.

Does anyone know how to implement this dropdown to overlay over it’s parent’s?

2

Got my answer. I had to make the <label> selector set to overflow : visible.

CSS:

.item-autocomplete {
    position: static;
    overflow: visible;
}
3

Glad to see you got this resolved :smile: