Facebook Comments plugin flyout window cut off

Question

I have the Facebokk Comments plugin inplemented on my website. The trouble is that when there are no comments, the "Comment using" flyout window gets cut of at the bottom when being pressed for loging in.

Have a look please: http://www.sparkyfacts.co.uk/Electricity-At-Work-Regulations.html

Here is the html code:

 <div class="contentbox">
    <div class="contentline1"></div>
<div class="contentline2">
    <!--Facebook Comment: --> 
<center>  
<div class="fb-comments"data-href="http://www.sparkyfacts.co.uk/Electricity-At-Work-Regulations.html" data-width="625" data-numposts="5" data-colorscheme="light"></div>
</center>
<!--End  --> 
</div>

I have tryed adding overflow: visible; to every element of my css (body, content, contentbox, contentline2 even to the fb-comments) and still the same.

I know about the issue when putting Facebook Like and Share boxes next to the edge of an html element. I thought that this is the same issue, but as I have said the overflow:visible; code did not help.

Any suggestions please?

Answer 1

You can set min-height on the .fb_ltr element (the iframe in this case)

For instance I used

.fb_ltr { min-height: 400px !important }

Which gives it space for the menu while there are no comments but doesn't leave you with an enormous iframe.

Annoyingly it works out fine when there are some comments posted, because the widget resizes itself to fit the content correctly.