SB Admin Pro Mobile Navbar Scrolling

[NetSpud]

Hi, I've got a problem with the mobile navbar not allowing uses to see data below a certain level, meaning that data gets cut off. Is this intentional, or am I missing something? I've checked on your demo website, on the index.html page - and the issue is there, too. To replicate, just go to mobile mode (on an actual mobile, it works fine on desktop for some reason) and try scrolling down.

Thank you :)

[NetSpud]

An example of when a nav item is unfurled past the point you can see it: https://ibb.co/4NDs0Dw

[GertJanFrl]

What browser are you using? I have no problems with it, and scrollbar is showing.

[NetSpud]

What browser are you using? I have no problems with it, and scrollbar is showing.

I'm using Chrome 89.0 on Android 7.1.1.

[NetSpud]

Ok, I've done a bit more testing and I've got the sidebar scrolling when using dev tools, but not on its own. It seems to scroll behind the sidebar, but not the sidebar itself, even when there is content that can be scrolled. It works fine on a desktop and on mobile viewsize, however it blatantly refuses to work when using a physical android device. This is all happening on the default demo website. Does anyone have any suggestions of what to try next?

[NetSpud]

Just tried on android 7.0 and it worked for some reason, same version of Chrome though. Potential bug?

[NetSpud]

bump, is there going to be any fix for this? I'm still getting this problem on my device.

[davidtmiller]

Based on the testing we've done it seems to be isolated to Android OS. Chrome and Safari on iOS are working, as well on Android 7.0+ as you've commented above. I am still testing a few things in order to pin down the issue. If it were a z-index issue then the navigation wouldn't be appearing at all, but I'm still not ruling that out. We are definitely working on finding a solution to this one!

[davidtmiller]

I am still working on pinning this one down, and it took a backseat due to the Bootstrap 5 launch and v2 of the theme. I will be circling back to this and working towards an answer, but I am hoping that it is only an issue on older versions of the Android OS which would mean the bug wont show itself too often. I will update when we get more information!

[Mrlongmaster]

I have the same problem as NetSpud, I use it on a Samsung note 10+ device and found that error. Please fix it soon. Thanks!

[davidtmiller]

I am looking into this issue now, and I have a feeling it is coming from the usage of overflow-y: overlay within the scrollbar mixin that is used with the sidebar.

Although Chrome for Android should support it, I think that the media query might not be working properly. Line 39 of _scrollbar.scss shows:

// Always allow overflow-y when on touch devices
@media (pointer: coarse) and (hover: none) {
    overflow-y: overlay;
}

I don't have an Android device on me to test this quite yet, but I think that this isn't passing through to Android/Chrome, which means that the overflow property is falling back to the overflow-y: hidden outside of the media query.

For that reason, I would propose trying to replace your _scrollbar.scss file with the following:

@mixin scrollbar-custom {
    overflow-y: overlay;

    &::-webkit-scrollbar {
        width: 0.75rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10rem;
        border-width: 0.2rem;
        border-style: solid;
        background-clip: padding-box;
        background-color: fade-out($gray-900, 0.8);
        border-color: transparent;
    }

    &::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background: inherit;
    }

    // Show scrollbar overlay only on hover when on non-touch devices
    // Overflow overlay puts scrollbar on top of content instead using space
    @media (pointer: fine) and (hover: hover) {
        overflow-y: hidden;
        &:hover {
            overflow-y: overlay;
        }
    }

    // Always allow overflow-y when on touch devices
    @media (pointer: coarse) and (hover: none) {
        overflow-y: overlay;
    }

    // Use overflow auto for Firefox only
    @-moz-document url-prefix() {
        overflow-y: auto;
    }
}

I'll be testing this as soon as I can get my hands on an Android device. Essentially I am setting the global default to the overflow-y: overlay instead of hidden, and only using the hidden property within the fine pointer with hover media query which targets desktop computers using a mouse or touchpad.

Let me know if this works, I will continue testing it out and if we get a solution we will push it in the next update!

[Mrlongmaster]

I am looking into this issue now, and I have a feeling it is coming from the usage of overflow-y: overlay within the scrollbar mixin that is used with the sidebar.

Although Chrome for Android should support it, I think that the media query might not be working properly. Line 39 of _scrollbar.scss shows:

// Always allow overflow-y when on touch devices
@media (pointer: coarse) and (hover: none) {
    overflow-y: overlay;
}

I don't have an Android device on me to test this quite yet, but I think that this isn't passing through to Android/Chrome, which means that the overflow property is falling back to the overflow-y: hidden outside of the media query.

For that reason, I would propose trying to replace your _scrollbar.scss file with the following:

@mixin scrollbar-custom {
    overflow-y: overlay;

    &::-webkit-scrollbar {
        width: 0.75rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10rem;
        border-width: 0.2rem;
        border-style: solid;
        background-clip: padding-box;
        background-color: fade-out($gray-900, 0.8);
        border-color: transparent;
    }

    &::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }

    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    &::-webkit-scrollbar-track {
        background: inherit;
    }

    // Show scrollbar overlay only on hover when on non-touch devices
    // Overflow overlay puts scrollbar on top of content instead using space
    @media (pointer: fine) and (hover: hover) {
        overflow-y: hidden;
        &:hover {
            overflow-y: overlay;
        }
    }

    // Always allow overflow-y when on touch devices
    @media (pointer: coarse) and (hover: none) {
        overflow-y: overlay;
    }

    // Use overflow auto for Firefox only
    @-moz-document url-prefix() {
        overflow-y: auto;
    }
}

I'll be testing this as soon as I can get my hands on an Android device. Essentially I am setting the global default to the overflow-y: overlay instead of hidden, and only using the hidden property within the fine pointer with hover media query which targets desktop computers using a mouse or touchpad.

Let me know if this works, I will continue testing it out and if we get a solution we will push it in the next update!

I can't find _scrollbar.scss file in ../scr/scss folder.

[davidtmiller]

Depending on what version SB Admin Pro you're using, it should be in a mixins folder rather than with the sidebar since the scrollbar mixin is bring brought in with the fixed nav layout.

[Mrlongmaster]

I'm using version SB Admin Pro Developer License For developers who want access to the original source files $49.

Vào Th 3, 21 thg 9, 2021 vào lúc 07:32 David Miller < @.***> đã viết:

Depending on what version SB Admin Pro you're using, it should be in a mixins folder rather than with the sidebar since the scrollbar mixin is bring brought in with the fixed nav layout.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/StartBootstrap/pro-feedback/issues/26#issuecomment-923480810, or unsubscribe https://github.com/notifications/unsubscribe-auth/AURRZQXASODDWY475M4DLDLUC7HDLANCNFSM42OJYFLQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[davidtmiller]

What is the version number that you're using? It will be at the top of the package.json file.

[Mrlongmaster]

"version": "2.0.2"

Vào Th 3, 21 thg 9, 2021 vào lúc 07:49 David Miller < @.***> đã viết:

What is the version number that you're using? It will be at the top of the package.json file.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/StartBootstrap/pro-feedback/issues/26#issuecomment-923487439, or unsubscribe https://github.com/notifications/unsubscribe-auth/AURRZQQGZ2CYNWOYCHJBMZTUC7JCPANCNFSM42OJYFLQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[davidtmiller]

Check src/scss/core/mixins/_scrollbar.scss that should be where to find it!

[Mrlongmaster]

Cool, thanks!

Vào Th 3, 21 thg 9, 2021 vào lúc 09:00 David Miller < @.***> đã viết:

Check src/scss/core/mixins/_scrollbar.scss that should be where to find it!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/StartBootstrap/pro-feedback/issues/26#issuecomment-923517151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AURRZQXWPT2MSJCLTWLQTL3UC7RL7ANCNFSM42OJYFLQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Mrlongmaster]

Hi, I tried following your suggestion but the problem is still not solved. Is there any other problem?

Vào Th 3, 21 thg 9, 2021 vào lúc 03:29 David Miller < @.***> đã viết:

I am looking into this issue now, and I have a feeling it is coming from the usage of overflow-y: overlay within the scrollbar mixin that is used with the sidebar.

Although Chrome for Android should support it, I think that the media query might not be working properly. Line 39 of _scrollbar.scss shows:

// Always allow overflow-y when on touch devices @media (pointer: coarse) and (hover: none) { overflow-y: overlay; }

I don't have an Android device on me to test this quite yet, but I think that this isn't passing through to Android/Chrome, which means that the overflow property is falling back to the overflow-y: hidden outside of the media query.

For that reason, I would propose trying to replace your _scrollbar.scss file with the following:

@mixin scrollbar-custom { overflow-y: overlay;

&::-webkit-scrollbar {
    width: 0.75rem;
}

&::-webkit-scrollbar-thumb {
    border-radius: 10rem;
    border-width: 0.2rem;
    border-style: solid;
    background-clip: padding-box;
    background-color: fade-out($gray-900, 0.8);
    border-color: transparent;
}

&::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

&::-webkit-scrollbar-corner {
    background-color: transparent;
}

&::-webkit-scrollbar-track {
    background: inherit;
}

// Show scrollbar overlay only on hover when on non-touch devices
// Overflow overlay puts scrollbar on top of content instead using space
@media (pointer: fine) and (hover: hover) {
    overflow-y: hidden;
    &:hover {
        overflow-y: overlay;
    }
}

// Always allow overflow-y when on touch devices
@media (pointer: coarse) and (hover: none) {
    overflow-y: overlay;
}

// Use overflow auto for Firefox only
@-moz-document url-prefix() {
    overflow-y: auto;
}

}

I'll be testing this as soon as I can get my hands on an Android device. Essentially I am setting the global default to the overflow-y: overlay instead of hidden, and only using the hidden property within the fine pointer with hover media query which targets desktop computers using a mouse or touchpad.

Let me know if this works, I will continue testing it out and if we get a solution we will push it in the next update!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/StartBootstrap/pro-feedback/issues/26#issuecomment-923272488, or unsubscribe https://github.com/notifications/unsubscribe-auth/AURRZQRCFV43QNBCOS5WAE3UC6KSXANCNFSM42OJYFLQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.