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.)

Add comment

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:

<pre class="prettyprint"><code> $(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);
});
</code></pre>

I hope this will work for now.

Keep coding, Marcin

Please insert min. 20 characters.

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

Add comment

Mousa pro answered 3 years ago

0 0 Best answer

Thank you <a href="/profile/?id=144094" target="_blank" rel="nofollow">@Marcin Luczak</a>, 
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..<img src="https://usercontent.mdbootstrap.com/mdb-images/support/5cd35317-d574-4362-93eb-a942162bbdc8-Screen%20Shot%202021-11-27%20at%208.45.05%20AM.jpg" alt="enter image description here" title=""><img src="https://usercontent.mdbootstrap.com/mdb-images/support/5656f8ea-b7cc-413a-b92a-c247949962b8-Screen%20Shot%202021-11-27%20at%208.45.19%20AM.jpg" alt="enter image description here" title="">

I think that is related scrollbar.js Specifically

<pre class="prettyprint"><code> main: 'ps',
 rtl: 'ps__rtl',
 element: {
 thumb: function (x) { return ("ps__thumb-" + x); },
 rail: function (x) { return ("ps__rail-" + x); },
 consuming: 'ps__child--consume',
 },
</code></pre>

You can try on same link: <a href="http://islamicdesigner.com/Dynamic/dorar_new_site/index-rtl.html" target="_blank" rel="nofollow">test</a>

Please insert min. 20 characters.

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 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

Add comment

Marcin Luczak staff answered 3 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Mousa

Pro User 45Support score
5Questions 3Answers 2Snippets