Custom tabs not displayed in line on Chrome

  • Resolved Martinovy

    (@martinovy)


    7 years, 9 months ago

    Please take a look at https://5element.in using Google Chrome. There are 3 custom tabs with 3 different FB profiles (the customer wants – the customer gets). Why those tabs are not displayed in one line? Firefox does it OK.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author cconoly

    (@cconoly)

    What is the code you are using inside the custom tab? If it is an iframe markup then it should have a width attribute. That may solve the problem.

    Thread Starter Martinovy

    (@martinovy)

    Nope, it’s not iframe. The code looks like this:
    <div class="fb-page" data-href="https://www.facebook.com/organizacja5element" data-width="350" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/organizacja5element"><a href="https://www.facebook.com/organizacja5element">5 Element</a></blockquote></div></div>

    Plugin Author cconoly

    (@cconoly)

    OK. The problem is that the Facebook javascript is rendering the social page widget after WP-Flybox collects the width parameter. WP-Flybox defaults the width to 180px. So since Facebook has not rendered the content, WP-Flybox uses a value that is wrong after the content is rendered. I see your data-width is 350. So you need to set your div or container to 350 as well so that WP-Flybox has a width to use before Facebook renders.

    Put <div style="width:350px"> before your existing code and </div> after it. That should correct the issue with them not being in line. Let me know how that works. Thanks!

    Thread Starter Martinovy

    (@martinovy)

    Yes, this helped me ?? Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom tabs not displayed in line on Chrome’ is closed to new replies.