Scrolling problem with Twitter Bootstrap based themes

  • Resolved TeppoM

    (@teppom)


    11 years, 1 month ago

    I installed Buddypress Media for my website and ran into a strange problem. In most of the media frontend pages scrolling is disabled, which makes the features rather hard to use.

    I’m using a custom theme build on the Roots Theme, which again is built on Twitter Bootstrap. I tested some other bootstrap themes and they all seem to produce similar conflict. However, if I try the default Twenty-twelve, there is no problem.

    Using WP 3.5.1 and the Buddypress 1.7 B2. You can see the no-scrolling media page here.

    Any ideas how to resolve this? I would like to keep using the theme AND the plugin.

    http://wordpress.org/extend/plugins/buddypress-media/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter TeppoM

    (@teppom)

    11 years, 1 month ago

    The problem applies to desktop browsers. Sweeping with mobile (tested on Winows phone and iPad) works.

    Maybe there is a conflict in scripts trying to figure out the device?

    Plugin Contributor Saurabh

    (@saurabhshukla)

    11 years, 1 month ago

    This is unusual, but we are looking into this. Since this is with 1.7 beta, this is on a lower priority than a few other bugs. So, this could take a little time. But we’ll update this thread, asap.

    Thread Starter TeppoM

    (@teppom)

    11 years, 1 month ago

    Thanks for looking into this. My guess is there is a conflickt in Bootstrap JS and the JS used in BBM, as this works well with bb 1.7B with other, non-bootstrap based themes and with none of the ones using bootstrap.

    Plugin Contributor Saurabh

    (@saurabhshukla)

    11 years, 1 month ago

    Actually, this was due to a css selector. Bootstrap uses the .media class on a wrapper for media files and sets the overflow to none. Now, BuddyPress Media hooks into BuddyPress and registers ‘media’ as a slug. So, BuddyPress adds the class .media to the body tag.

    So, the whole page was set to overflow:hidden and the scrollbars disappear. We fixed this by adding body.media’s style as overflow:auto to override the bootstrap effect in 2.7.3.

    Thread Starter TeppoM

    (@teppom)

    11 years, 1 month ago

    Perfect. Scrolling works after plugin update. Thank You!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Scrolling problem with Twitter Bootstrap based themes’ is closed to new replies.