homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
showing content outside div with hidden overflow
sssweb




msg:4621173
 10:16 pm on Nov 4, 2013 (gmt 0)

I have a centered div on my webpage with overflow set to 'hidden' that I use as a window or frame for my content. Inside, I have a facebook 'send' button that, when clicked, opens a flyout dialog box for the user to enter a message to send with the URL. The problem is that the flyout gets clipped by the hidden overflow of the containing box.

I want to put the facebook button outside the container div in my markup to avoid the hidden overflow. But I also need to make sure that it's absolutely positioned to appear in the frame. What's the easiest way to do this?

CSS positioning for the content frame is (note the div below is centered on the page, but don't rely on that as it's not always the case):

position: fixed;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;

I tried putting it in a separate div with the same positioning and overflow set to 'visible', but for some reason it doesn't work (even verified that the setting is applied in IE's dev toolbar)

 

swa66




msg:4621174
 10:23 pm on Nov 4, 2013 (gmt 0)

Having a wrapper that's "gained position" (through position: relative, absolute or fixed) is typically a thing that backfires down the road when trying to break out of it, or when trying to find the original edges of the viewport.

Personally: I think your best choice is to go with the flow and not let the wrapper gain position.

sssweb




msg:4621175
 10:23 pm on Nov 4, 2013 (gmt 0)

Before anyone spends time on this, I think I found the problem; will update soon.

sssweb




msg:4621178
 10:29 pm on Nov 4, 2013 (gmt 0)

Problem solved -- there was also a child container with overflow hidden that I needed to override.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved