facebook iframe App: Send/Like button z-index issue

Question

We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?

Answer 1

I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}

Hope this is what you were looking for, because it was exactly what I was looking for!

Answer 2

Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.

Answer 3

The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.

Answer 4

I found this to work:

/* the below allows the fb:like iframe to show entirely instead of getting cropped off */

.fb-like iframe {
    max-width: inherit;
}

/* the same issue with the "send" button */

.fb-send iframe {
    max-width: inherit;
}

As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.

Hope that helps.

Answer 5

I modified Shane's excellent solution to focus specifically on z-index:

css:

.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
    z-index:8 !important;
}

The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.

Answer 6

This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.