jQuery UI dialog with absolutely positioned child partially hides overflowing child

Question

I have a standard jQuery UI dialog. Inside that dialog, I have a custom jQuery UI button that allows me to select an event type for a calendar event. I'm using the jQuery UI position utility to absolutely position a div that contains the list of available event types, as you can see in the image.

When the event type div is showing, any content that is longer than the available space disappears under the edge of the dialog. I would expect this if the it was 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 (the default), and my widget's div that displays the event types is an absolutely positioned div that has a z-index of 1003. I would expect that my div would take higher precedence in the stacking order.

My question is: what's happening here? Why is my div being hidden by the bottom edge of the dialog?

Answer 1

It looks like it was the overflow: hidden on the outer dialog element. Setting that to overflow: visible solved the issue.

Answer 2

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