All geek questions in one place

The jQuery UI dialog with an absolutely positioned child partially hides the overflowing child

I have a standard jQuery interface dialog. Inside this dialog, I have a jQuery user interface that allows me to choose the type of event for the calendar event. I use the jQuery UI position utility to absolutely position a div that contains a list of available event types, as you can see in the image.

When a div event type is displayed, any content that is larger than the available space disappears below the edge of the dialog. I would expect this if it were an iframe, or if the absolutely positioned parent had a higher z-index. However, the JQuery UI dialog is a simple absolutely positioned div with a z-index of 1002 (by default), and my div widget that displays event types is an absolutely positioned div with a z-index of 1003. I would expect my div to have more high priority in stacking order.

My question is: what is going on here? Why is my div hiding at the bottom of the dialog box?

screenshot of issue

+6
source share
2 answers

This seems to be an overflow: hidden in an external dialog element. Setting this overflow: visible resolved problem.

+6
source

Does your containing dialog element (with Z-index 1002) have overflow: hidden; value anywhere in its CSS?

+1
source

Source: https://habr.com/ru/post/888473/

More articles:


All Articles