z-index problem with like buttons…

[photastic]

Hey,

I have just released a website based on the Going Green Pro theme with Genesis 2.0.1 running on the background.
I used some custom code to create a shortcode for sharing buttons but the like button for Facebook is stuck "under" my siderbar...

you can see what I mean if you go to http://www.sint-jozefinstituut.be/ and hit the Like button on one of the categories...

hopefully you guys can help...

cheers in advance!

best regards,
Hans

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

http://www.sint-jozefinstituut.be/

[Gary Jones]

It's not a z-index issue - it's an iframe width issue. You've set the data-width attribute as 90 - try increasing that, and you might see the available space in the iframe increase as well. I suspect it's some JS which is deciding there's only a few (71) pixels space between the Like button and the edge of the element, so it's limiting it to that.

You could float all buttons left, or move the Facebook button to first in the list.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[photastic]

hey Gary,

thanks for the answer... I tried your suggestions (both the data-width & the float:left) on all items but it's still cut off...

any other suggestions?

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[fedelosa]

I found:

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

From: https://developers.facebook.com/docs/reference/plugins/like/

But still can't fix it 🙁

[photastic]

got it fixed... the span in which the Facebook like button was sitting, wasn't providing enough room to show the entire flyout...

I solved it by making the width of the span wide enough to show the entire flyout menu:

div.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span {
width: 450px !important;
}

The !important was needed to overrule the span's inline css width attribute.

---

Trying to craft webstuff at Photastic Webdesign
Learning Genesis by solving unanswered topics

[Author]

Posts