Disable user interaction when side menu or drag animation is triggered


#1

Hi there!

I am having problems since the beginning with this issue but I would like to try to find a solution… :frowning:

My question is: is it possible to disable user interaction on other views when the main view is being dragged like side menu or when an animation is being triggered? (like ‘back’ button behavior for example). Do you get my point?

I uploaded a video so that you guys can see my issue…

https://www.dropbox.com/s/4wnszc5zaostcet/user_interaction.mp4?dl=0

Here my ionic info:

cli packages: (C:\cursoIonic3\ionic\rssFeed\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.7.1
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : C:\Users\cdurobaenas\AppData\Local\Android\Sdk

Misc:

    backend : pro

I see a lot of ‘solutions’ for ionic 1, but I would need it for ionic 3+.

Thanks a lot!


#2

Anyone? :frowning:

I think it should be as simple as having the possibility to disable interaction in the parent View, but I don’t know how to do that. I didn’t find any property or method to disable user interaction inside the View…

Thanks guys.


#3

A workaround, not a solution is the proper sense but still, is to block the opening of the menu thru the drag gesture and to only allow the opening when the user click on the hamburger menu

 <ion-menu swipeEnabled="false">

#4

My solution was to write my own side menu code (it is only css). the menu is triggered by setting a boolean (showright) to true.

Example code:

CSS

     .sideright{
          position: absolute;
          background: white;
          height:100%;
          border-left: lightgrey solid 2px;
          top:56px;
          right:-300px;
          width:300px;
          max-width:300px;
          min-width:300px;
          z-index:100;
          overflow-y: auto;
     }


     .showright{
          right:0;
          -webkit-transition: right 0.5s ease-in-out;
          -moz-transition: right 0.5s ease-in-out;
          -o-transition: right 0.5s ease-in-out;
          transition: right 0.5s ease-in-out;
     }

HTML (within ion-content)

<div  class="sideright" [ngClass]="{'showright': showright}">
        <!-- html code here -->
       <button ion-button color="danger" (click)="showright=false">Hide</button>
 </div>

#5

Thanks, I knew that one and I am currently using it for other Pages. :stuck_out_tongue:

But I was wondering if it was still possible, as I read that it has been fixed on other posts from some time ago. Thanks anyway.


#6

Ok, good one, I’ll give it a try for sure. Thanks.