Facebook Like comment box getting cut off vertically and horizontally

Question

I'm trying to figure out why the Facebook Like comment box is getting cropped. I've tried changing the width attribute to a much larger size than necessary. I added a height attribute to my fb:like definition even though it doesn't look like it's supported. Neither seemed to help.

I also put a "margin-top" style on the Comments element right below the fb:like element to make sure it didn't have something to do with the content below the comment box that was causing it to cut off.

You can see a screenshot of what I'm talking about here: https://i.sstatic.net/y2Fll.jpg

I've been grappling with this one for a while now. If anyone can offer any help, I'd appreciate it. Thanks!

Semiyearly

Do you have a code sample? At first glance it looks like it's inside a container that has a fixed width & height. – Weirick

Answer 1

Make sure all parent elements have overflow: visible set in their CSS definition.

Epner

Answer 2

A simple bit of CSS did the trick:

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

In your case it might however be that the parent is cutting it off, as in my case there was plenty space to the right of the comment box. However, the iframe should be absolutely positioned and hence not care about what the parent of the entire like box is like.

Gaiety

Answer 3

I found out that if you have iframe set to max-width: 100%; this totally screws with the fb-like button. I changed it to iframe { max-width: inherit; }

Wreak

Answer 4

its a simple fix, in the code there is a height 62px, though if your page name is 2 lines part of the like button will cut off and the height doesn't update automatically, I updated this to 70 and now the problem is solved

Nahshu