Show embedded select box on overflow, out of popup container

Question

I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.

My actual code (I cannot paste here my code for security reasons) has:

• The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.

• The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when the pop up height is less.

The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.

If i did not apply jquery ui select menu, it´s working as expected.

Please find the below images for reference.

• 1.When having enoug popup size.

• 2.when popup size is less ,select is hiding.

• 3.What i am expecting.

Please suggest me what i can do to solve this.

Answer 1

Add CSS property overflow-y:visible on the main popup div:

This will make the inner content that is outside the main div top/bottom bounds to be rendered.

popupSelector {
   overflow-y: visible;
}

Here is the documentation about overflow-y