Facebook comment box formatting height: 590px

Question

On the iPad, the Facebook comment field is automatically set to 590 pixels high. The initial view is just a login button, so it is too large. I can’t set the height in css, because as soon as they log in, the content area will be too small, and fb will not set classes to which I could connect in these conditions.

I have:

<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=00000000"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

And inside the content area:

 <div id="fb_comments"> <fb:comments href="<?php the_permalink(); ?>" num_posts="10" width="500"> </fb:comments> </div> 

Answer 1

The solution I use for this is to put the facebook div comments inside the parent div, set the maximum height of the parent div and overflow for scrolling.

Example:

HTML: parent div:

 <div id="fb-comments-container"><!-- comments plugin goes here --></div> 

CSS

 #fb-comments-container { max-height: 300px; overflow: scroll; } 

Answer 2

I think you could use jQuery to solve this problem. Check if the user is connected. If it is, then set the height to 590px, otherwise set it the way you want.

You can do this by adding the JQuery plugin and then doing something like $('.fb:comments').css('height', 'YourValuepx');

In any case, I do not know if this type of plugin can be used on a mobile device. there is also a mobile version of the jQuery plugin, but I have no experience: jQuery mobile