Sidenav disappears on scroll on mobile device

Topic: Sidenav disappears on scroll on mobile device

sz.imre priority asked 6 years ago

Seems to me that this issue reported here: https://mdbootstrap.com/support/problem-with-sidenav-on-mobile-device/ is still present. If you open the sidenav on mobile and scroll down, it will disappear with the mask open. If you then click on the menu again to open it, it will add another layer of mask and will also disappear on scroll but in this case you have to click anywhere twice to hide the mask. Tested it on Android and iOs, same behaviour.

Add comment

tom3 pro answered 6 years ago

0 0 Best answer

Am I right in thinking this hasn't been fixed in the latest release (4.5.1)? If not, it would be very helpful if some code could be given to get round the problem - until it's fixed in an update. Thanks

Jakub Strebeyko staff commented 6 years ago

You are completely right, the latest release addressed other issues. The general fixing campaign is scheduled in within a month, but cannot (and honestly, don't want to) promise the issue will be on agenda. We are open for suggestions and code submits regarding the problem. With Best Regards, Kuba

tom3 pro commented 6 years ago

While this feature doesn't work in the demos, I noticed it does work in the main part of your site. After looking at these pages (where it works), I added two lines to the final script in the example pages, to initialise Perfect Scroll - and it seems to fix the problem: // SideNav Initialization $(".button-collapse").sideNav(); var el = document.querySelector('.custom-scrollbar'); Ps.initialize(el); .. which is a little puzzling. If you already have a solution, why didn't you implement it in the examples? Perhaps there is some problem with this, but it seems to be a solution (but I'm not an expert). Tom

Please insert min. 15 characters.

pablodgcatulo pro commented 6 years ago

tom3, I have the same problem with pro-template. Seems they don't update the zips you download with the same versión that is in the demo. I've posted a similar problem with no luck.

Jakub Strebeyko staff commented 6 years ago

Hi guys, Thanks for joining the discussion! Let me clarify, that here, at MDB Support, effort is made to help resolve MDB-releated issues everyday and no solution to a problem will ever be hidden from people we are helping. @Tom - I am sorry to inform you that initializing perfect-scrollbar does not resolve the problem being discussed in this thread - an issue known, platform specific (mobile), presumably related with styling and to be dealt with in an appropriate release cycle. @Pablo - As I was explaining in the other thread, our zip packages are automatically updated to keep them consistent with the demos and examples. The problem you informed us about we were not able to recreate and it seems that its nature (causing an error message in the first place) is of an entirely different nature. Worth to keep the issue tickets separate, so they can be properly addressed. Thanks for understanding. With Best Regards, Kuba

Please insert min. 15 characters.

tom3 pro commented 6 years ago

Thanks Kuba, I thought perhaps I wasn't clear what the issue was. However my main concern was that the sidebar menu as on your demo pages is unusable on desktop or mobile, once the menu items extend beyond the pages - eg by expanding a drop down. There is no way to access menu items which are not yet visible. Initializing perfect-scrollbar (as you do on your main pages, but not in the demos) solves this problem: the menu acquires scrollbars and is usable. I have tested this on Windows, Mac, iOS, using Firefox, Chrome, Safari and Edge. Before this change, I wasn't going to use your sidebars; now I am, so I'm happy anyway - and happy if new fixes will be made in due course. PS I've just looked into the original issue more carefully. I see the problem. From my point of view, it's very minor compared to menus being inaccessible. Scrolling the main page with the menu open on a small screen is not a critical function - not even very useful, but of course it would be better if the issue were fixed. I'm sorry to have confused the issue.

Thanks Kuba,

I thought perhaps I wasn't clear what the issue was. However my main concern was that the sidebar menu as on your demo pages is unusable on desktop or mobile, once the menu items extend beyond the pages - eg by expanding a drop down. There is no way to access menu items which are not yet visible. Initializing perfect-scrollbar (as you do on your main pages, but not in the demos) solves this problem: the menu acquires scrollbars and is usable.

I have tested this on Windows, Mac, iOS, using Firefox, Chrome, Safari and Edge. Before this change, I wasn't going to use your sidebars; now I am, so I'm happy anyway - and happy if new fixes will be made in due course.

PS I've just looked into the original issue more carefully. I see the problem. From my point of view, it's very minor compared to menus being inaccessible. Scrolling the main page with the menu open on a small screen is not a critical function - not even very useful, but of course it would be better if the issue were fixed. I'm sorry to have confused the issue.

Please insert min. 15 characters.

Federico free commented 6 years ago

This problem seems to be "resolved" in the main site because if you add like 20 li tags the height of the sidenav is greather than mobile so it seems to work but it doesn't! Ony beacuse the overflow can run but if you put few element the issue persist. A possible workaround is to prevent it with jquery

tom3 pro commented 6 years ago

@Onori, the main problem, as far as I could see, was that the sidemenu was unusable because it was not possible to scroll the menu, to access menu items which were not visible. This applies on desktop and mobile. If you look at any of the sidenav examples (eg https://mdbootstrap.com/javascript/sidenav/) and resize the window so you have to scroll the menus, you will see what I mean. This is not an issue with the sidemenu on the main site, so I followed that example to fix this problem (as I have described). I don't know why they don't fix their own examples - unless the side menu only has a few items, the menus are unusable. I expect you're referring to the other issue (which from my point of view is not so serious). I'm afraid it was my fault for confusing this thread, mixing up the two issues.

Please insert min. 15 characters.

Federico free commented 6 years ago

@tom3 Hi Tom, the "issue" i would underline before is this one: when i open on safari a common sidenav and window height > custom-scrollbar, when i scroll in the sidenav it disappear and the overlay effect still remain. It's not a huge problem but it's annoying. So my workaround (if someone is interested) is: $(document).ready(function() { $("#slide-out").on({ touchmove: function(e) { e.preventDefault();//this prevent to close the sidebar on scrolling }, touchstart: function(e) { e.preventDefault(); //this prevent to close the sidebar on scrolling } }); }); insted if you want to close the sidenav on scrolling but you wanna remove the overlay: remove preventDefault(); and do it $("#sidenav-overlay").click();

Please insert min. 15 characters.

tom3 pro commented 6 years ago

Thanks Onori. Using Safari on a desktop Mac, I can't replicate this. I imagine this is only a mobile issue. However I have occasionaly noticed similar problems with the overlay, on a desktop computer - eg in some situations, if you reduce the height of a window, the sidenav closes but the overlay remains. I'm sure your code will be useful if I come across the problem.

Federico free commented 6 years ago

@tom3 Unfortunately on inpector element by pc (i'm using chrome) everything works fine. But if you wanna replicate this you can just open this link from mobile (https://mdbootstrap.com/previews/docs/latest/html/skins/white-skin.html) and then: 1. open sidenav 2. scroll on sidenav 3. the sidenav will close itself but the overlay still there I don't know why but in this exapmle pages there is no overflow in the sidenav too, so i think there are old css and js mdb files With my code posted before you can prevent the closing or just remove the overflow div. Hope this help :)

Jakub Strebeyko staff commented 6 years ago

Hi Onori, Welcome to the Support Board! Thanks for posting a potential solution! Can anyone who has been facing the issue confirm it solves the problem? With Best Regards, Kuba

Federico free commented 6 years ago

@tom3 Anyway you say that your can't access menu items which were not visible. So please try add this style at your elements and this should fix your problem: <div id="slide-out" class="side-nav sn-bg-4 fixed" style="overflow:hidden!important;"> <ul class="custom-scrollbar list-unstyled" style="overflow:hidden!important;">

Mikołaj Smoleński staff commented 6 years ago

@tom3 can You confirm that it solves Your problem?

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

Hi there sz.imre, Thanks for reaching out and letting us know about the bug - it has been added to out list of developments and this time it really is going to get fixed. Until then - have you perhaps considered disabling scrolling? With Best Regards, Kuba

SL-Tech pro commented 6 years ago

Is there a way to see this list and make a reporting or not? I would like to make some suggestions, like triggering the change event on select. Thank You

Jakub Strebeyko staff commented 6 years ago

The list is internal. To have your suggestions considered I suggest considering posting them here, in the name of discussion and reference. Best, Kuba

SL-Tech pro commented 6 years ago

Ok. Thank You

sz.imre priority commented 6 years ago

I need the scrolling on mobile, the menu doesn't fit on one page.

Jakub Strebeyko staff commented 6 years ago

Is it the same issue reported above? In case it is not please create a separate discussion thread on the board, so we can separate these concerns and deal with them accordingly. Thanks, Kuba

sz.imre priority commented 6 years ago

That was in reply to your comment regarding disabling scrolling.

Jakub Strebeyko staff commented 6 years ago

Sure, I misunderstood.

Add comment

sz.imre priority answered 6 years ago

0 0 Best answer

I guess I'll have to dive into the SideNav() code then :(

Add comment

SL-Tech pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

I've asked too three weeks ago (your link is 6 months old). But actually there'isnt any solution. We have to wait the next update hoping this will be fixed. The only solution i found it for now is wrapping everything in an absolute (0,0,0,0,100%,100%) container as first div of the body, with overflow: auto. (Remember Body and HTML height and width 100% with no margin and padding) Chrome and Others Browser Bar will remain fixed because you cant scroll the page, but only the div, so the height will never resized and the navbar will not disappear. I've to kill search input in mobile version beacuse the height being resized by keyboard and the sideNav disappears again

vivek-saurabh pro commented 6 years ago

Can you please elaborate your solution ?! If possible, can you please share the code ?! Thanks you.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

sz.imre

51Support score
2Questions 4Answers 0Snippets