Pulsante Mi piace Facebook Causa barra di scorrimento orizzontale

Ho recentemente aggiunto un pulsante simile a Facebook al mio sito e provoca la visualizzazione di una barra di scorrimento orizzontale quando non è necessaria. Non appare in Chrome ma è presente in Firefox e IE.Pulsante Mi piace Facebook Causa barra di scorrimento orizzontale

Ho controllato il codice creato in Firebug e non riesco a vedere cosa non va.

Ecco un link al sito in modo da vedere: http://www.swiftfurniture.com/

Come si può vedere, su Firefox e IE (possibilmente anche altri browser), c'è una barra di scorrimento orizzontale quando non è necessario. È sicuramente il pulsante di Facebook che lo causa, perché quando lo commento, scompaiono.

Ho aggiunto un div di larghezza fissa attorno al pulsante con overflow: nascosto applicato, ma sembra ignorarlo.

So che ci sono un sacco di altre domande simili a questo, ma con l'utilizzo di PrestaShop non voglio davvero scherzare con il codice base troppo semplicemente per far funzionare un pulsante Mi piace di Facebook (se possibile). Speravo in una soluzione per mantenere tutto il codice contenuto nel "modulo social" che ho creato ... cioè un solo file piuttosto che scherzare con i file header di PrestaShop.

fonte

2012-03-21 BT643

Ho esaminato il suo problema un po 'con Firebug e posso condividere alcune osservazioni che potrebbero essere utile.

C'è un codice che viene iniettato nel vostro <div id="fb-root"></div> e all'interno di esso è un iframe con una larghezza di stile in linea di 575px.

Questo è ciò che causa le barre di scorrimento.

fonte

2012-03-21 17:19:36 redlena

Non so come mi sia mancato, sapevo che doveva esserci qualcosa che lo rendesse più ampio, ma non riuscivo a riconoscerlo. Doh! Ho aggiunto: '.FB_UI_Hidden { \t larghezza: 100px! Importante; } 'come stile css e ha risolto il problema. Grazie – BT643

Ho avuto lo stesso problema ... c'è una larghezza nel codice (penso che il valore predefinito sia 450). Se lo cambi in qualcosa come 150, penso che sarai in buona forma. Ovviamente, dipende dalle preferenze che selezioni sul plugin di Facebook.

Buona fortuna, spero che ti aiuti.

fonte

2012-03-21 17:14:24 NotJay

C'è un DIV subito dopo

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

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

Rimuovere posizione assoluta da questo e quello di scorrimento orizzontale scompare dopo che mostrerà alcuni contenuti dicendo

Given URL is not permitted by the application configuration.

quindi o semplicemente rimuovere questo DIV o applicare

display:none; per ottenere questo funzionamento perfettamente

Vai a questa schermata

enter image description here

avendo problema vedere c'è uno scorrimento orizzontale
avere soluzione di vedere non v'è alcun scorrimento orizzontale, ma non desiderato contenuti in cerchio.
applicando display none; a questo div o rimuovendo questo div completamente dal codice, vi condurrà alla soluzione

fonte

2012-03-21 17:17:47 Jack

Non riesco a cambiare nessuno di quei codici, per quanto ne so? È iniettato da Facebook. – BT643

Il mark-up Facebook inserito nella pagina è soggetto a modifiche in modo da utilizzare una soluzione che non dipende da esso.

è possibile risolvere questo problema mettendo il div fb-root come il primo figlio del vostro elemento corpo

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

il tag script e div fb-like in grado di rimanere nel loro posto originale.

Rif: Facebook documentation e bug report

fonte

2012-04-17 07:21:38 scarba05

Ho '# fb-root' come primo div figlio e sto ancora vedendo il problema. – emptywalls

È possibile aggiungere alla "fb-like" attributo data-width = "100px"

fonte

2014-02-12 10:29:48 user2722034

Questa era la soluzione giusta. Il mio widget simile non salta più a una grande larghezza durante il caricamento. –

Tra le varie soluzioni elencate in questa pagina, questa era l'unica che funzionava davvero per me. Sintomo: la barra di scorrimento orizzontale lampeggia mentre il pulsante FB si carica (e quindi scompare). – medmunds

Nessuna delle risposte qui ha funzionato per me quindi ho provato io stesso. Ho trovato una soluzione:

Put seguente CSS nella tua testa sito:

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

Put seguente codice HTML in cui si desidera mostrare il vostro pulsante mi piace:

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

ci si va :)

fonte

2014-02-16 00:11:10 Karl

Aggiungi questo al tuo css

.fb-like{height:20px}

aggiungere gli attributi dei dati di larghezza e data-altezza per

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

Questo impedisce anche la barra di scorrimento verticale di apparire, se non è necessario.

fonte

2014-07-06 17:01:12

Pulsante Mi piace Facebook Causa barra di scorrimento orizzontale

risposta

Problemi correlati