Remove white space beneath Facebook comments plugin

Question

Take a look at the this link. Scroll down a bit and you should see a Facebook comments plugin with an embedded Google map right beneath it.

My problem is, there is a ton of white space between the bottom of the comments plugin and the top of the map. Firebug indicates the white space is at the bottom of the comments plugin (as opposed to the top of the map). However, I can't seem to find a way to eliminate it.

I've tried just using relative CSS positioning to move the map up 50 pixels, but then it sits on top of the comments if there happen to be any. Also, if the user has turned FB comments off, it screws the layout as well.

Any ideas on how to get rid of the excessive white space?

UPDATE: While the answers provided here pointed me in the right direction, it ended up being too much trouble. I simply put the Facebook comments beneath the Google map at the bottom of the page which masks the problem somewhat. Apparently this is a bug according to one of the commenters below, so we'll just have to wait for a fix.

EDIT: Been toying with these styles for a while, no luck. I can alter the height of the box initially based on Jason's suggestions, but anything I do screws up the layout (new comments appear BEHIND the map since the comment area stays the same height as its original height, instead of allowing Facebook to dynamically grow the height of its IFRAME element when a comment is added). Any other ideas?

EDIT #2: It seems that the root of the problem is that Facebook automatically assigns a height of 200px to the IFRAME containing the comments box. When comments are added, Facebook dynamically resizes thie IFRAME to the appropriate height. I'd be able to solve my problem if I could find a way to make that default 200px start at 145px. Not sure if this is possible or why Facebook would think that 200 (arbitrary?) was a good height to start at.

EDIT #3: I realize the white space is coming from the IFRAME that Facebook generates and that there's nothing I can do about that, specifically. I started a bounty on this question because:

1) I find it hard to believe that I'm the only person that has an issue with the way this displays.

2) It's possible it's due to the way I configured something?

3) There's some other workaround I'm not thinking of.

Hopefully the bounty will encourage some creative replies!

Sofia

Answer 1

Don't set the height to auto, set the overflow...

Set height:110px and overflow:auto on the Facebook iframe - then comments will expand the height of the iframe dynamically.

Pop these changes in your $().ready function - this works fine for me.

Wept

Actually there is a little lag in the resizing in Firefox 3.6.11 – Wept

Won't overflow:auto; simply cause scroll-bars to appear instead of expanding the iframe? – Noh

@Sparky672 potentially, but only if outer block level container is fixed, so in this case no. If it were fixed then setting overflow:visible would probably cause the contents to bleed under the google map element. overflow:scroll would always have the effect of adding scrollbars whereas (AFAIK) overflow:auto will push content down if not otherwise constrained. However w3schools.com/css/pr_pos_overflow.asp seems to contradict what I've said, but in the browsers i've tested in it seems to work fine. – Wept

@earcam: You may be right and I really don't know which is why I asked the question. However, I do know from personal experience to never trust w3schools. See w3fools for more. – Noh

@Scott, I think you'd need to do two passes as per discussion here (iframes are elements of the current document, so XPath can't treat them as part of the current DOM, they're object elements) As facebook.com/plugins/comments.php seems heavily scripted to generate elements back in so I can't (at least with FireBug, FirePath, etc) get into the fb:comments section. You may have better luck with serverside access? – Wept

@Scott, this is a reported bug bugs.developers.facebook.net/show_bug.cgi?id=16836 I've voted on it and cross posted (if you can rally some more votes then they may sort it sooner). In previous comment re:Xpath&iFrames I missed the link for "as per discussion here" which was csschat.com/showthread.php?t=9282 – Wept

This didn't work for me, but this did: https://mcmap.net/q/1469877/-why-is-there-excessive-whitespace-with-facebook-mobile-comments-plugin – Glazunov

Answer 2

I had this problem on Mobile browsers. Facebook added this auto detect for mobile devices. It loads a different version of the plug-in that is full of bugs. Just set the mobile flag to false to force it to use the regular version that does not have bugs. This saved me. I hope it helps you.

Chesnut

Answer 3

There are several contributing factors:

• .fbFeedbackContent has min-height: 165px
• the loaded iframe has height: 200px
• there is an empty span tag within the fb:comment tag

Addressing any or all of these should get you started. You may need to use !important to override some of the CSS.

Aegisthus

What would I override the iframe height to in order to get it to be fluid though? I don't necessarily want to set a specific height. Setting height: 130px !important works well, but as soon as a comment is added, it overflows the box. – Sofia

Tried this with no luck. It eliminates the white space, but then just moves the white space beneath the "Like" button and the comments box. .fbFeedbackContent { min-height:0 !important; } iframe.fb_ltr { height:auto !important; } – Sofia

I am sure some combination of the above will work. If it moved it to another spot, firebug those styles and see why. – Aegisthus

Answer 4

I was suffering from the same problem. The extra white space only shows up when there are no comments yet. So you just simply do the following:

1.) Swap back to the old markup, because step 2) is not supported by HTML5

2.) Make a new div #commentcount, in which you will load the count of comments. You can hide it with display:none;.

3.) Insert the following code to #commentcount: <fb:comments-count href=http://example.com/></fb:comments-count>, where example.com is the exact URL of where you're commenting. In most cases this will be $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"] (PHP), or the appropriate HTTP header variables in other languages.

4.) Store the comment count in a variable in JavaScript. You can reach the count easily, It's inside the #commentcount div in a span element. If you're not sure about this, check chrome dev tools or firebug, it will show you the rendered structure. (as facebook may change it eventually)

5.) Write a nice javascript code to update the facebook comment container div if(commentcount==0). Add a style of: height:110px; overflow:hidden;.

6.) Load the comment count frequently so if someone comments, you can drop the hidden overflow and fixed height, and they can see the new comment. You can do this using setInterval().

It works!

An easier alternative solution: You can set the style="background-color:#f5f5f5;" for the comments box if you have for example a site with F5F5F5 background color. The comments box colour will blend into your site. It looks nice.

Avocation

Answer 5

Turn off mobile parameter. For exemple:

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10"  mobile="false"></div>

Aeneas

Answer 6

i solved it by setting the height on the . im using the facebook plugin in wordpress. you can find that file under /wp-content/plugins/facebook/social-plugins/comments.php in line 75 or set it to css

#respond{
height: 112px;
}

Jamnis

And then what do you do when there are more than one comment and the box needs to have a height greater than 112px? – Hodess

you can make it min-height – Jamnis

Yes but the problem returns again because facebook's height is wrong. – Hodess

Answer 7

I am using FbComments plugin for Wordpress and there you can set the customisation options. This solved the problem for me.

Where it asks Comment box style AND Whole comment box style enter the height you want. It should be 72px. So you enter height:72px; in the space provided. Don't forget the ;

Briquet

Thanks for the suggestion, however I am not using FbComments or Wordpress. – Sofia