Absolute positioned element not showing with top z-index

Question

As part of my site there is a search field which features a suggestion/autocomplete box when the user types in current keywords. image

The problem is in order to make a scroll bar appear if the user types in too much i have to set overflow-x to auto and overflow-y to hidden. This then results in the suggestion box not showing/being cutoff by the overflow-y. image

You can find a demo of the issue here: http://testing.server-lists.com/minecraft/

A codepen simplified example can be found here As stackoverflow limited me to 3000 characters.

Even though the suggestions box has absolute positioning and a 1000 z index it is not appearing, does anyone know how to fix this?

Answer 1

I have checked the demo site you referred to and just removed the style attributes:

overflow-x: auto;
overflow-y: hidden;

From the div with class="bootstrap-tagsinput" and remove white-space:no-wrap; as it is almost impossible to show any thing if it is wrapped in a container has an overflow hidden.

Can you try it please and tell me if this works?