Topic: how to disabled swipe in sidenav
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
I can see now, thank you for your report. I'll add this to our bug list, and the team shall decide when to release a fix for that.
Until that time I've prepared a little snippet for you, that should remove all the elements and listeners related to swipe:
$(document).ready(() => {
// remove drag target element
$('.drag-target').remove()
// listen for sidenav to show and remove its swipe listeners
const config = { childList: true, subtree: true };
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
const $overlay = $('#sidenav-overlay');
if($overlay) {
$overlay.off('touchmove')
}
}
}
};
const observer = new MutationObserver(callback);
observer.observe(document.body, config);
});
I hope this will work for now.
Keep coding, Marcin
Hi,
Sidenav component doesn't have such option, however you can try to remove drag target element that is responsible for touch events handling:
$(document).ready(() => {
$('.drag-target').remove()
});
Please keep in mind that this is a custom solution that may be causing problems, and it should not be treated as an official fix.
Keep coding, Marcin
Mousa pro commented 3 years ago
I tried it, but still the swipe working when close sidenav with many bugs..
The problem for me that feature have a many bugs in usability, client is very upset
Marcin Luczak staff commented 3 years ago
Unfortunately, there is no other official way of disabling touch events for the Sidenav component in MDB4. What kind of bugs do you mean, do you have any errors in the console?
Mousa pro commented 3 years ago
You can try the swipe here on mobile device: http://islamicdesigner.com/Dynamic/dorar_new_site/index-rtl.html
Mousa pro commented 3 years ago
I don't have an errors in the console but the bugs in usability
Thank you @Marcin Luczak,
about swipe t's working fine now, but I have another issue about custom-scrollbar if I add many li inside and I touch and moved from left to right side, this is happening..
I think that is related scrollbar.js Specifically
main: 'ps',
rtl: 'ps__rtl',
element: {
thumb: function (x) { return ("ps__thumb-" + x); },
rail: function (x) { return ("ps__rail-" + x); },
consuming: 'ps__child--consume',
},
You can try on same link: test
Marcin Luczak staff commented 3 years ago
You can try to to initialize your PerfectScrollbar with suppressScrollX option which should prevent horizontal scroll:const ps = new PerfectScrollbar('#ps_element', { suppressScrollX: true});
Mousa pro commented 3 years ago
Thanks @Marcin Luczak issue's resolved.
Marcin Luczak staff commented 3 years ago
I'm glad it works :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.20.0
- Device: mobile
- Browser: every browsers
- OS: all
- Provided sample code: No
- Provided link: No