I’d replaced the default comment system with Facebook’s, but I’ve encountered a problem.
When someone wants to comment as a page you have to pick that page from a dropdown menu and this dropdown menu disappears behind the footer.
Is there a way to easily fix this with custom css?
I’ve added an image to show you what’s going on. If you want to reproduce this error you can do it on this page.
Hi
You can try this css but then will be disadvantage because this border will become visible in footer: http://screencast.com/t/pi3OtdNStAc4 This is the only way to fix this for the moment. Another solution would be to edit the plugins files and try to increase the z-index for the drop-down menu. This is not possible with custom css from “outside” because the drop-down menu it’s it’s whitin an iframe and can’t be targeted.
Hope this help.
Thanks!
I’ve tried the css edit you suggested and it does bring the dropdown menu to the front.
But it has a nasty side effect; the footer becomes unusable. I can’t click on any of the links or even select text for that matter.
I’ve also looked a the code for the plugin but there isn’t a separate css file. It’s just the basic code Facebook supplies.
Could you think of another way to solve this problem?
Thanks for the effort.
Hi
Yes unfortunately by setting the z-index at 0 the links won’t work anymore. Another solution would be either to change the footer css code a bit, but this is a difficult task, or adding a margin to the facebook comment container using custom css:
.fb_iframe_widget_fluid span{
margin-bottom: 100px;
}
This is not the best solution but it will work. Another solution would be to add the margin only when user click on this link: http://screencast.com/t/fD3SboQ2RaCh but this require a js script and this is a bit hart do do.
Thanks!
Decided to go for the iframe adjustment. Thank you for the bit of css Andrei.
