Disable interactions in ion-side-menu-content when side menu is open?

I’ve noticed that users are trying to swipe the side menu (ion-side-menu) closed and end up actually triggering actions in the main frame (ion-side-menu-content). Does anyone have a suggestion as to how I could go about programmatically disabling interaction in a frame? Seems like there would be some kind of Ionic directive, but I can’t seem to find it. Thanks!

Hm, interesting… I thought we put in something to make it some any interaction with the ion-content directive would close the side-menu…

But I tried this with a swipe list and side menu and got the same results. Good catch!

Opening an issue for it right now.

1 Like

That’s awesome – I love how responsive you guys are. Thanks!

Thats our jobs :smile:

1 Like

For what it’s worth, here was my solution in case anyone else ends up looking for it. Works fairly well – will probably add an animation to have the light grey cover fade away smoothly. Hoping to add swipe gestures to close the side menu next :smile:

A custom directive with the following:

.directive('disableScreen', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
        function() {
          return scope.sideMenuContentTranslateX;
        }, function(translateVal) {
        if(Math.abs(translateVal) === 275) {
          !element.hasClass('display') && element.addClass('display');
        } else {
          element.hasClass('display') && element.removeClass('display');

A template that looked like this:

  <ion-pane transition-check ion-side-menu-content drag-content="false">
    <disable-screen class="cover"></disable-screen>
    <ion-nav-view name="main"></ion-nav-view>

  <!-- LEFT SIDE MENU -->
  <ion-side-menu side="left">
    <ion-nav-view name="left"></ion-nav-view>

  <!-- RIGHT SIDE MENU -->
  <ion-side-menu side="right">
    <ion-nav-view name="right"></ion-nav-view>


Two CSS classes, display and cover:

.cover {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: rgba(0,0,0,0.3);

.cover.display {
  display: block;
1 Like

Thanks ianlyons, working fine for me.