Login

I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.

I've checked the created code in Firebug and can't see what's going wrong.

Here's a link to the site so you can see:

[To see links please register here]

As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.

I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.

I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.

I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.

Good Luck, hope that helps.

I've looked into your problem a bit with Firebug and can share some observations that might be helpful.

There is code that is being injected into your `<div id="fb-root"></div>` and within that is an iframe with an inline style width of 575px.

That is what is causing the scrollbars.

There is a DIV just after

<div id="fb-root" class=" fb_reset">

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying

`Given URL is not permitted by the application configuration.`

so either just remove this DIV or apply

`display:none;` to get this working perfectly

See this screenshot

![enter image description here][1]

1. having Problem see there is a horizontal scroll
2. having solution see there is no horizontal scroll but unwanted
content in circle.
3. applying `display none;` to this div or by removing this div
completely from the code, will lead you to the solution

[1]:

The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.

You can resolve this issue by placing the fb-root div as the first child of your body element



<body>
<div id="fb-root"></div>

The script tag and fb-like div can remain in their original place.

Ref: [Facebook documentation][1] and [bug report][2]

[1]:

[To see links please register here]

[2]:

[To see links please register here]

You can add to the "fb-like" attribute data-width="100px"

None of the answers here worked for me so I tried it myself. I found a solution:

Put following CSS in your site head:

#fb-like-wrapper iframe {
width:100px!important
}

Put following HTML where you want to show your like button:

<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>

There you go :)

Add this to your css

.fb-like{height:20px}

Add attributes data-width and data-height to

<div class="fb-like" data-width="124px" data-height="20px"></div>

This also prevents the vertical scrollbar from appearing if it is not needed.

prefix403

horaciot

fief499

ivoryswfglxtw

tekkie480438

diastereomeric588730

candacelh

dramatize309