Geek asks and answers

Facebook, like a button that opens the outside of a window

I have a facebook button like at the bottom of my site. When I click on it, the “box” into which I can enter a comment goes beyond my web browser window and I cannot scroll down or something like that (see Screenshot below - at the bottom of the image at the bottom of the window ) How can i fix this? (i.e. make a field above the button). Tks

enter image description here

HTML

  <div id="social">
    <div class="fb-like" data-href="http://mydomain.com" data-send="false" data-layout="button_count" data-width="106" data-show-faces="false" data-font="verdana"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="msa">Tweet</a> 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
  </div>

CSS

#footer {
    position: fixed;
    bottom: 0;
    color: #333;
    left: 0;
    z-index: 999;
    width: 96%;
    text-align: right;
    padding: 30px 2%;
    vertical-align: bottom;
}
#social {
    position: absolute;
    vertical-align: middle;
    left: 2%;
    color: #333;
}

.fb_iframe_widget, iframe.twitter-share-button {
    display: inline-block;
    vertical-align: middle;
}
span.languageselector {
    display: inline-block;
    height: 20px; /* same height as #social div */
    line-height: 20px; /* same as line-height */
}
+5
source share
3 answers

Actually there is an unpleasant solution. And I do not think this is legal. But if this is so important, you can override facebook css. In your case, something like this will do the trick.

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {

/* Now you can apply css here */
bottom:0!important;
}

If you want to enable the submit button, you can use

For the light color scheme:

.fb_edge_comment_widget.fb_send_button_form_widget.light.fb_iframe_widget {

/********css code here*******
*Ex:    
position: fixed!important;
bottom: 20px!important;
top: initial!important;
*/
}

For a dark color scheme:

.fb_edge_comment_widget.fb_send_button_form_widget.dark.fb_iframe_widget {

/********css code here*******/

}

, . , . , .

+1

. ,

overflow:auto

+1

This is a common problem with embedding the Like button in fixed and absolutely positioned containers. In your case, the easiest solution is to move a similar button higher on the page. You cannot make the comment box pop up, not down.

0
source

More articles:


All Articles