Sidenav glitch when tapping on viewport edge


Topic: Sidenav glitch when tapping on viewport edge

dsuciu asked 6 years ago

I am using side navigation fixed to the left side of the browser window. The exact same solution you have on your website on smaller viewports. I have checked your website navigation on my android tablet and I get the same glitch.

Expected behavior

The menu should only open when the hamburger menu icon (menu open trigger) is clicked. No other gesture or action should open the menu.

Actual behavior

If I tap the very edge of the viewport (10px to the left edge of the viewport where the menu is) while the menu is hidden, the menu opens and closes rapidly.

I believe the div.drag-target is triggered but I am not actually dragging it so it should have no effect as I am only tapping. If I do that repeatedly the menu opens without the div.sidenav-overlay and I can't close it so I have to refresh the page.

Another question I have is why can I only drag/swipe it open and not close it the same way? It looks half built.

I would like to have the swipe functionality work properly but as it does not work as expected I have changed the .drag-target width to 0 for now to disable the swipe/drag functionality and that fixes the issue on tap but you should definitely look into the issue. Either fix it so it does nothing on tap and add slide to close or remove it completely.

Resources (screenshots, code snippets etc.)

.drag-target { height: 100%; width: 0; position: fixed; top: 0; z-index: 998;


Marta Szymanska staff pro premium answered 6 years ago

Hi,

would you provide a snippet showing the problem here: https://mdbootstrap.com/snippets/? I'll try to help you.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: Mobile
  • Browser: Chrome
  • OS: Android
  • Provided sample code: No
  • Provided link: No