Botón Me gusta de Facebook que causa una barra de desplazamiento horizontal

Recientemente, he agregado un botón de me gusta de Facebook a mi sitio y está causando que aparezca una barra de desplazamiento horizontal cuando no es necesario. No aparece en Chrome, pero está en Firefox e IE.Botón Me gusta de Facebook que causa una barra de desplazamiento horizontal

He comprobado el código creado en Firebug y no puedo ver lo que está pasando mal.

Aquí hay un enlace al sitio para que pueda ver: http://www.swiftfurniture.com/

Como se puede ver, en Firefox e IE (posiblemente otros navegadores también), hay una barra de desplazamiento horizontal cuando no se necesita. Definitivamente es el botón de Facebook lo que causa, porque cuando lo comento, desaparecen.

He agregado un div de ancho fijo alrededor del botón con desbordamiento: oculto aplicado, pero parece ignorarlo.

Sé que hay muchas otras preguntas similares a esta, pero con el uso de PrestaShop no quiero perder demasiado el código central solo para que funcione el botón Me gusta de Facebook (si es posible). Esperaba una solución para mantener todo el código contenido en el "módulo social" que he creado ... es decir, solo un archivo en lugar de perder el tiempo con los archivos de encabezado, etc. de PrestaShop.

Fuente

2012-03-21 BT643

He mirado en su problema un poco con Firebug y puedo compartir algunas observaciones que podrían ser servicial.

Hay un código que se está inyectando en su <div id="fb-root"></div> y dentro de él se encuentra un iframe con un ancho de estilo en línea de 575px.

Eso es lo que está causando las barras de desplazamiento.

Fuente

2012-03-21 17:19:36 redlena

No sé cómo me lo perdí, sabía que debía haber algo que lo hiciera más amplio pero que no podía detectar. Doh! Agregué: '.FB_UI_Hidden { \t ancho: 100px! Importante; } 'como un estilo CSS y solucionó el problema. Gracias – BT643

Tuve el mismo problema ... hay un ancho en el código (creo que el valor predeterminado es 450). Si cambias eso a algo así como 150, creo que estarás en buena forma. Por supuesto, depende de las preferencias que seleccione en el complemento de Facebook.

Buena suerte, espero que ayude.

Fuente

2012-03-21 17:14:24 NotJay

Hay un DIV justo después

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

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

Quitar posición absoluta de esto y que de desplazamiento horizontal desaparecerá después de que mostrará algunos contenidos diciendo

Given URL is not permitted by the application configuration.

así que o simplemente eliminar este DIV o aplicar

display:none; para hacer que esto funcione perfectamente

Ver captura de pantalla

enter image description here

que tienen problema de ver hay un desplazamiento horizontal
tener solución Ver que no hay desplazamiento horizontal pero no deseada contenido en el círculo.
aplicar display none; a este div o mediante la eliminación de este div completamente del código, le llevará a la solución

Fuente

2012-03-21 17:17:47 Jack

No puedo cambiar ninguno de ese código, aunque yo sepa. Es inyectado por Facebook. – BT643

El marcado de Facebook que se inserta en su página es susceptible de cambio, por lo que desea utilizar una solución que no dependa de él.

Usted puede resolver este problema mediante la colocación de la div fb-root como el primer hijo de su elemento del cuerpo

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

La etiqueta de script y div fb-como puede permanecer en su lugar original.

Ref: Facebook documentation y bug report

Fuente

2012-04-17 07:21:38 scarba05

Tengo '# fb-root' como el primer hijo div, y sigo viendo el problema. – emptywalls

Se pueden añadir a la "fb-como" atributo de datos-width = "100px"

Fuente

2014-02-12 10:29:48 user2722034

Esta fue la solución correcta. Mi widget similar ya no salta a un ancho grande mientras se carga. –

De las varias soluciones enumeradas en esta página, esta fue la única que realmente funcionó para mí. El síntoma fue la barra de desplazamiento horizontal parpadea mientras se carga el botón FB (y luego desaparece). – medmunds

Ninguna de las respuestas aquí trabajó para mí, así que probado a mí mismo. He encontrado una solución:

Coloca el siguiente CSS en su cabeza sitio:

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

Coloca el siguiente código HTML en la que desea mostrar su botón:

<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>

hay que ir :)

Fuente

2014-02-16 00:11:10 Karl

Añadir esto a su css

.fb-like{height:20px}

añadir atributos de datos de ancho y los datos de la altura a

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

Esto también evita que la barra de desplazamiento vertical de aparecer si no se necesita.

Fuente

2014-07-06 17:01:12

Botón Me gusta de Facebook que causa una barra de desplazamiento horizontal

Respuesta

Cuestiones relacionadas