Menu
I am implementing a Facebook application that shown as a tab in a fan page.
The application has a product details page that has like, send and comments plugins.
The problem is when clicking on the send and like buttons, the flyout dialog (the window that pops after clicking the button) is clipped by the left edge of the iframe (The application is in right to left language).
From graphical design perspective, the location of the buttons can't be changed and scroll bars are not allowed. The application must be 520px wide, no more and no less.
Is there any option to control the position of the flyout to prevent its clipping? Is there any other way to prevent the clipping?
I searched similar questions here with no success.
740
Since these buttons include HTML structure in your page, they are stylable via CSS. So you can move the popup dialogs with CSS.
If you take a closer look at the popups presented by facebook, you will see, that it has some styles attached to it:
The only thing you now have to do is moving this popup via CSS to the correct position.
For example: if you want to hide the comment popup of the like button completely, you can just use this CSS:
.fb_edge_comment_widget.fb_iframe_widget {
display: none;
}
If you now want to move it, you cannot use .fb_edge_comment_widget.fb_iframe_widget since the element properties (set by JavaScript) will override your CSS. You have to use the span one element lower:
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
This code will move the popup by 300px to the left:
This is not the most beautiful solution (note the small arrow at the top of the box now points to nothing), but it works.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.fb_edge_comment_widget.fb_iframe_widget > span{
right: 300px;
}
#wrap {
width: 650px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="fb-root"></div>
<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/de_DE/all.js#xfbml=1&appId=336384849737745";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.google.de" data-send="true" data-width="500" data-show-faces="false"></div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
