Top

Pop-up del “mi piace” di Facebook tagliato!

Ieri, cliccando sul mi piace del mio blog, mi sono accorto che il pop-up (o flyout) che dovrebbe uscire, per postare la notizia su Facebook, veniva tagliato. Da subito mi sono messo alla ricerca di una soluzione e alla fine l’ho trovata ma solo in lingua inglese!

Allora mi sono chiesto, ma perché non scrivere la soluzione in italiano in modo da far risolvere il problema anche a chi non è proprio “amico” dell’inglese?

Flyout facebook tagliatoNel mio caso il flyout veniva tagliato quasi per intero, ma potrebbe essere tagliato anche a metà o in verticale.

La causa del problema è una semplice riga di codice, che in molti casi è inutile (tipo il mio), e che dice al browser cosa fare con gli elementi che superano i margini dell’elemento in cui sono contenuti.

Questo codice, quindi, è relativo al div “contenitore” dell’elemento e può avere due origini:

  • Dal codice HTML
  • Dal CSS della pagina

Il metodo più veloce per risolverlo è quello che utilizza Firebug o l’ispeziona elemento di Chrome.

Per prima cosa fate click destro e poi ispeziona elemento sul mi piace di facebook. Ora, essendo un iframe, vedrete molti div che non ci interessano ma voi risalite fino a trovare il codice che da inizio all’iframe:

Benissimo, a questo punto, poco sopra (2 righe), ci sarà il div che lo contiene, nel mio caso è

Abbiamo trovato il nostro div? Potrebbe essere, ma in molti casi (specialmente per chi usa un plugin), il div contenitore sarà quello di livello superiore!

overflowPer vedere se è il nostro div (cliccateci e) controllate se ha nell’HTML

oppure se, nella colonna al lato (CSS), ha la scritta overflow:hidden; (nel mio caso è sbarrato invece nel vostro sarà normale).

Se non presenta nessuno dei due casi, trovate il div appena più in alto (che ha il triangolino per espandere più a sinistra).

Il div più in alto di

nel mio caso è

A questo punto dovreste ritrovarvi l’overflow:hidden o nel CSS(al lato) o nell’HTML.

Se si trova nell’HTML, provate a toglierlo con Firebug (o ispeziona elemento), se adesso funziona bene modificate la pagina rimuovendolo (o mettendo overflow:visible) nel vostro CMS (WordPress, Joomla ecc.).

Per il CSS dovete fare quasi la stessa cosa. L’ispeziona elemento (non so per Firebug) permette di disattivare un attributo della classe, in questo caso sarà overflow:hidden (cliccando sulla spunta al lato), fatelo. Se risolvete il problema ora dovete modificare il file CSS. Apritelo e cercate:

Sostituite a class il nome del vostro div, nel mio caso post-meta (non dimenticate di mettere il punto prima).

Ora tra gli attributi della classe trovate l’ overflow:hidden e, come per l’HTML, rimuovetelo oppure sostituitelo con overflow:visible.

Spero abbiate risolto il problema 😉

Powered by WordPress. Designed by WooThemes