Question

I’m working on a plugin that allows popover panels in Jquery Mobile.

A panel will look like this:

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
</div>

and goes after the content section of a JQM page.

Sample (buggy) here: sample

Panels behave like viewports or pageContainers. JQM by default only uses the body as pageContainer. My plugin also allows panels, so you integrate popovers into the normal navigation.

My problem:
I added triangles to the popovers, but I need to keep panel CSS overflow-x: hidden thereby hiding triangles. If I comment out overflow:hidden, the triangle is visible, but when I’m changing pages, the panel “bleeds out”, like so:

As the content section determines the scrollbar, I tried shuffling overflow:hidden around, also setting it on the page inside the popover but nothing works. I don’t want to move the triangle outside of the panel, so:

Question:
Is there a way to show a child element outside of a parent with overflow:hidden or why do does setting overflow-x:hidden hide my triangle, which is on top/bottom (more y than x)?

Just looking for some ideas or other workarounds.

Thanks for help!

EDIT:
here is the triangle CSS:

.popover_triangle { 
    position: absolute;
    line-height: 0%; 
    width: 0px; border-top: 16px solid rgba(0,0,0,0); 
    border-left: 16px solid rgba(0,0,0,0); 
    border-right: 16px solid rgba(0,0,0,0); 
    border-bottom: 16px solid black;  
    }
.ui-triangle-top .popover_triangle { 
    top: -32px;
    }
.ui-triangle-bottom .popover_triangle { 
    bottom: -34px;
    }

The popover has:

.ui-popover { 
    position:  absolute; 
    z-index:1005 !important; 
    border: 3px solid black;  
    border-radius: 4px; 
    left: auto; 
    }
.popover1 { 
    margin-top: 3.25em; 
    right: 5em;  
    height:25em; 
    width: 15em; 
    top: 0;
    }

Answer 1

No, with overflow-x: hidden, you cannot have that triangle sticking out of the popover with absolute positioning… I have tried this on various browsers!

What you need to do, is create another div inside your popover, and apply and overflow-y: scroll or auto to that div. (I assume you might have meant overflow-y instead of overflow-x, since the scrollbar is vertical?) Leave the normal overflow to your popover element. To get overflow-y: auto to that inside div working properly, you need to give it a height, eg height: 100%. (If you can’t specify a pixel amount and 100% does not make space for other elements in the popover, there is other ways to work around that)

Eg:

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
    <!-- insert extra DIV here that contains content and hidden overflow -->
</div>