CODEWITHSUNDEEP
javascriptcssfacebookhtmlcomments
Jon
Jon

Reputation: 137

Incredible shrinking Facebook comments

This one is an odd one. I've got HTML5 Facebook comments on one of my pages, and after the page loads, the Facebook comment area starts to shrink horizontally until it reaches 5 or 0px. You can see it here:

http://www.rocketcases.com/casestarter/captain-quinn

I cannot figure out why this has started to happen. It didn't start off like that, it just started doing it recently.

I've tried disabling all my other JS, and it's still happening. I've searched Google and StackOverflow. It doesn't seem like anyone else has ever come across this.

Any ideas? Am I missing something very obvious?

Upvotes: 2

Views: 132

Answers (3)

Jon
Jon

Reputation: 137

It was because I had added some custom CSS to size the width of the FB comments div.

.fb-comments, .fb-comments iframe[style] {width: 90% !important;

Once I removed that, it works just fine. So odd.

Thanks for the help!

Upvotes: 0

cbr
cbr

Reputation: 13652

Set the span's width which is inside the fb-comments fb_iframe_widget container to 100% !important.

Like this:

.fb_iframe_widget span { width: 100% !important}

EDIT:

The reason appears to be in one of Facebook's scripts, which calculates the width of the element relative to the parent element. A piece from the script:

s.height=Math.max(this._shrinker.offsetTop,0)

What this means is, unless the parent element (in your case, the div with the classes fb-comments and fb_iframe_widget) has a fixed width, the script will loop and keep on reducing the width.

Here's the snippet from the script if you're interested: http://pastebin.com/GesPgQNY

Upvotes: 1

Muhammed Aslam C
Muhammed Aslam C

Reputation: 887

Setting a min-width for the element will solve the problem. and it is better to assign a unique class to plugin's parent element, to avoid future conflicts.

.fb-comments.fb_iframe_widget span:first-child {
min-width: 600px;
}

Upvotes: 0

Related Questions