how to disabled swipe in sidenav


Topic: how to disabled swipe in sidenav

Mousa pro asked 3 years ago

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


Marcin Luczak staff answered 3 years ago

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


Marcin Luczak staff answered 3 years ago

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


Mousa pro answered 3 years ago

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..enter image description hereenter image description here

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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