1

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

popover 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:

triangle visible, but panel is bleeding

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;
    }
frequent
  • 27,643
  • 59
  • 181
  • 333
  • Not exactly relevant, but the default scrollbar looks somewhat out of place with the rest of your look and feel. – JAB Jun 05 '12 at 14:45
  • @JAB. Because I tried to make a screenshot during transitions... took a while.... Check the sample page, no scrollbars by default – frequent Jun 05 '12 at 14:46
  • Can you post the code section and css for where the triangle is put? – ayyp Jun 05 '12 at 14:47
  • @frequent On the sample page, if I'm looking at the correct bit, the triangles show for me and the content stays within its box. – ayyp Jun 05 '12 at 14:47
  • possible duplicate of [Make child visible outside an overflow:hidden parent](http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent) – JAB Jun 05 '12 at 14:48
  • @AndrewPeacock - mh. My Firefox (latest) doesn't show them – frequent Jun 05 '12 at 14:53
  • @frequent Maybe try adding the triangles as a `background-image` to whatever element contains the "Pop D2" and "Pop D3" text? – ayyp Jun 05 '12 at 14:56
  • Oh. I'm just thinking CSS before/after... – frequent Jun 05 '12 at 14:58
  • @frequent I was about to post an answer but it looks like you've already got the idea. If you use the CSS pseudo-class `:before` you can add the triangle as a sibling of the element rather than as a child which won't work due to the `overflow` property on the element. – Jasper Jun 05 '12 at 23:44
  • 1
    Here is a demo of using `:after` to add this type of effect: http://jsfiddle.net/necolas/hjMqh/ – Jasper Jun 06 '12 at 00:00
  • @Jasper: you want to make this an answer, so I can check? – frequent Jun 06 '12 at 06:52

1 Answers1

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>
yic
  • 700
  • 1
  • 6
  • 13