Bring absolute positioned child out of parent?

Please go here and click Facebook Like button in the social sharing bar floating at the left of the post.

After the click, there should appear a share dialog box but it seems to be buried inside the parent div. I searched across Google and tried to add overflow:visible to the parent div but it doesn't work. There's also a parent div with overflow:hidden and I've changed it to overflow:visible but it still refuses to work.

Weirdly, when the browser window gets shrinked with the share bar becoming horizontal, the Like button share dialog box appears properly upon click.

Another issue is with Firefox and IE, when the share bar becomes horizontal as viewport shrinks, Tweet button mysteriously disappears. But this doesn't happen in Chrome. It's really weird. When I use Firebug to examine the <li> element which contains the Tweet button code in the horizontal share bar, it's somewhat made semi-transparent or something fading in the background. However I see NO visibility:hidden or display:none styles thereof.

I tried to move the Tweet button down the line after the Facebook Like button and it disappears on horizontal status nonetheless.

Any help would be very much appreciated regarding the 2 issues! Thanks!

 

Your problem is with that awful iframe name="f3ecf8a287e5a8c" - it changes after you push the like button. There should be a better way to add a like button. it's like you are adding whole new website just for one like button.

 

Thanks a lot for the heads-up, @Blizzardofozz, but it's still that iframe when the bar becomes horizontal, yet it's working properly. I don't think the iframe is the culprit?

How about the 2nd issue then? Thank you!

 

your li under id of sharebar has overflow:hidden and this hides the facebook widget is longer than sharebar. If you remove that rule the whole widget will be displayed.

 

Second problem is occurring on resize not on page load and is related to id="twitter-widget-1" I guess. In Chrome is: visibility:visible; but in Firefox is visibility: hidden;

 

Thank you so much! It works! Now I have another site having a similar problem but not quite. Please see here: http://www.princessly.com/press/put-your-best-shoes-forward-on-your-big-day/

When facebook like button is clicked, the share dialog box seems to be correctly popping out of the parent but somehow is behind some other elements thus not showing its right half. It's restricted or constrained within some parent width.

I tried but couldn't find the culprit. Can you please help me one more time? Thank you so much!

 

I was able to find the culprit:

iframe {max-width:100%}

Somewhere in my styles this style is prohibiting the iframe to display out of the parent box to its full width. Max-width constrains it to a maximum width of 100% of its parent.

After disabling this it now fully displays it!

Now the only thing left was the twitter button issue. It's a really weird one. I restored these styles to id="twitter-widget-1":

twitter-widget-1 {
width:20px;
height:61px;
position:static;
visibility:visible;
}

But the twitter button still refuses to show up in Firefox and IE. In Chrome, it's completely fine. Really weird.

 

I guess it's some JS that is responsible for the resizing of sharebar and sharebarx. It's added with JS: style="position: absolute; visibility: hidden; width: 0px; height: 0px;" for iframe id="twitter-widget-0" and iframe id="twitter-widget-1" it's not in css file.

It's some rule that Chrome reads but FF and IE not. Maybe some JS error. Cant you find in the JS files where this is happening or those are external files?

Try adding css rules for twitter-widget-1 and twitter-widget-0 to be always visible?

 

Thank you so much for your help. I tried to find any javascript regarding the resize of the window for the share bars this is the only thing that I found:

jQuery.fn.sharebar = function(options) {
   var defaults = {horizontal: true, swidth: 65, minwidth: 1000, position: 'left', leftOffset: 20, rightOffset: 10};
   var opts = jQuery.extend(defaults, options); var o = jQuery.meta ? jQuery.extend({}, opts, jQueryjQuery.data()) : opts;

   var w = jQuery(window).width();
   var sharebar = jQuery('#sharebar');
   var sharebarx = jQuery('#sharebarx');
   var parent = jQuery(sharebar).parent().width();
   var start = sharebar_init();

   function sharebar_init(){
     jQuery(sharebar).css('width',o.swidth+'px');
     if (o.position == 'left') jQuery(sharebar).css('marginLeft',(0-o.swidth-o.leftOffset));
     else {
       jQuery(sharebar).css('marginLeft',(parent+o.rightOffset));
     }
     if(w < o.minwidth && o.horizontal) jQuery(sharebarx).slideDown();
     else jQuery(sharebar).fadeIn();
     jQuery.event.add(window, "scroll", sharebar_scroll);
     jQuery.event.add(window, "resize", sharebar_resize);
     return jQuery(sharebar).offset().top;
   }
   function sharebar_resize() {
     var w = jQuery(window).width();
     if(w<o.minwidth){
       jQuery(sharebar).fadeOut();
       if(o.horizontal) jQuery(sharebarx).slideDown();
     }else{
       jQuery(sharebar).fadeIn();
       if(o.horizontal) jQuery(sharebarx).slideUp();
     }
   }
   function sharebar_scroll() {
     var p = jQuery(window).scrollTop();
     var w = jQuery(window).width();
     jQuery(sharebar).css('position',((p+10)>start) ? 'fixed' : 'absolute');
     jQuery(sharebar).css('top',((p+10)>start) ? '10px' : '');
   }

};

Code (markup):

It seems to me there's nothing specially pertaining to the twitter buttons whatsoever. I's really weird.

 

Most probably something is not right with twitter JS files. I guess they write browser specific rules and something is wrong with IE and FF. Anyway you can't change twitter JS files. Try adding css rules for twitter-widget-1 and twitter-widget-0 to be always visible.

twitter-widget-1 {
width:20px;
height:61px;
position:static;
visibility:visible;
}

Code (markup):

If this is not working add JS styling of the element in your JS file.