z-index problem with like buttons…

Community Forums Forums Design Tips and Tricks z-index problem with like buttons…

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  photastic 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #62293

    photastic
    Participant
    Post count: 75

    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/
    #62317

    Gary Jones
    Moderator
    Post count: 691

    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.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #62319

    photastic
    Participant
    Post count: 75

    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

    #62339

    fedelosa
    Participant
    Post count: 3

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

    • This reply was modified 1 year ago by  fedelosa.
    • This reply was modified 1 year ago by  fedelosa.
    #62784

    photastic
    Participant
    Post count: 75

    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

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘z-index problem with like buttons…’ is closed to new replies.