[Support request] Off canvas panel page scroll issue

Home Forums Support Off canvas panel page scroll issue

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #938036
    Sam

    Hi, I have two small issues I wish to try and address:

    1) when the off-canvas panel is open and viewed in chrome browser on ios, the bottom bar of the browser window obscures the last widget. So in my case, it is the WC basket widget and the buttons are obscured. If you fiddle around with swiping up and down you can eventually get to it. Is there a fix for this, maybe adding some padding or something to make the off-canvas panel long enough so the last widget sits above?

    Please see my staging site (link provided).

    I tested Firefox and that did not have the issue. However, Safari is the same but not quite as bad.

    2) when the off-canvas panel is open, the page behind still scrolls sometimes when your swipe gestures intention is to move the off-canvas panel. Is there a way to stop this?

    thanks
    Sam

    #938225
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. I’m not seeing this. Can you show us a screenshot?

    2. Try this CSS:

    .slide-opened body {
        overflow: hidden;
    }
    #938699
    Sam

    Hi Tom,

    1) see here: https://www.dropbox.com/s/502gnjwvqhm4vjv/IMG_2444.PNG?dl=0
    2) can you explain what that css snippet was meant to do, I do not see any change.

    thanks

    #938845
    Tom
    Lead Developer
    Lead Developer

    What if you did this?:

    .slideout-navigation .inside-navigation {
        padding-bottom: 50px;
    }

    The other code should prevent any sort of scrolling when the off canvas panel is open. It seems to be working on my end?

    #939153
    Sam

    Hi Tom, thanks, that CSS worked it just needed 100px to clear the frame in chrome iOS.

    Regarding the scrolling issue, it’s a weird one to describe. If you swipe the overlay when the off-canvas menu is open then the page beneath scrolls. The problem is if you do this by accident then you cannot grab the off-canvas panel properly until the page has full stopped scrolling. Does that make sense?

    A simple solution could be to add a setting in the customizer so you can set the width of the slide-out off canvas panel so you could have it full width?

    thanks
    Sam

    #939307
    David
    Staff
    Customer Support

    Hi there,

    in the Off Canvas panel options you have Style > Overlay this will cover the entire screen.

    #939712
    Sam

    Hi David, yes I have seen that, but the styling is completely different.

    #940003
    Tom
    Lead Developer
    Lead Developer

    If you swipe the overlay when the off-canvas menu is open then the page beneath scrolls. The problem is if you do this by accident then you cannot grab the off-canvas panel properly until the page has full stopped scrolling. Does that make sense?

    The CSS I provided should make it so the page beneath can’t be scrolled.

    However, the overlay style can be styled to look exactly like the slide style if full width suits you better – they both have the same options.

    #940175
    Sam

    Hi Tom, right I see. It’s strange that it works differently for me. I will double check I executed that CSS properly. Noted on restyling the overlay. The reason I suggested setting the width of the slide-out was I thought it might involve less css.

    #940761
    Tom
    Lead Developer
    Lead Developer

    The overlay option is already built in, so if you can make that work it’s the best method when it comes to using less CSS 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.