Ionic split view bug?

ionic-v1
1

Hello
I’ve just migrated my project code to ionic beta 12. It used side menu so I tried to add the split view.
The only thing I had to add to <ion-side-menu side="left">was expose-aside-when="large" so it looks like this
<ion-side-menu side="left" expose-aside-when="large">

Looks very good!
But one encountered one problem. On clicking the menu toggle button it creates empty vaccant position nect to the menu. I also tried adding the menu toggle button in the codepen example given for the split menu and got the same result. Is it a bug or am I missing something?

Here is the link to the codepen

(Note you need to view the codepen in large screen ( > 768 px screen ) to see the problem)

2

I just ran into the same issue.

3

@Dipesh Adding the following styles works for me:

@media (min-width:768px) {
  .bar-header .ion-navicon {
    display: none;
  }
}

Here’s an updated CodePen:

4

Yes this one works. But I guess on has to add that css for every button with menu-toggle directive.

5

This would work, and works for every item that has a menu-toggle property:

@media (min-width:768px) {
  ion-nav-bar [menu-toggle] {
    display: none;
  }
}

I have updated the codepen:

1 Like
6

Thanks for a great solution!

7

I would however agree to state this is expected default behaviour on split view

8

I just noticed in Ionic’s CodePen that there’s another way of doing it:

<button menu-toggle="left" class="button button-icon icon ion-navicon" ng-hide="$exposeAside.active"></button>

ng-hide="$exposeAside.active" will hide the element when an aside is active.

I still prefer doing it in CSS instead of adding ng-hide everywhere, but to each their own :smile:
The following snippet works without having to use media queries:

.aside-open [menu-toggle] {
  display: none;
}
3 Likes
9

Good to know! Last options sounds cleanest to me, css fix has less overhead then adding ng-hide everywhere as well, so performance should be better. Thanks for sharing those findings :slight_smile:

1 Like
10

$exposeAside only works well with one side menu; if you have multiple the menu-open is true for any side menu … Any way to do that with multiple without CSS?

11 
var onSideMenuChanged = function () {
    var leftOpened = $ionicSideMenuDelegate.isOpenLeft();
    var rightOpened = $ionicSideMenuDelegate.isOpenRight();
    var stats = {
      left : leftOpened,
      right: rightOpened
    };
    var openedMenu = 'none';
    if ( leftOpend && rightOpened ) {
      openedMenu = 'both';
    } else if ( leftOpened ) {
      openedMenu = 'left';
    } else if ( rightOpened ) {
      openedMenu = 'right';
    }
    $rootScope.openedMenu = openedMenu;
  };
  $rootScope.$watch( function () {
    //We multiply right by 2 to trigger a change. Right and left both give 1, so if we switch it is still one and no change is made. By multiplying by 2, we force an integer differenc.
    return $ionicSideMenuDelegate.isOpenLeft() + ($ionicSideMenuDelegate.isOpenRight() * 2); //0 = none, 1 = left, right = 2
  }, function () {
    onSideMenuChanged();
  } );

I’ve used this for my project, might work for you as well :slight_smile: You might want to change something about it, but basically you could apply the $rootScope.openedmenu anywhere in your html, most logically as a class and bind some css to that class :stuck_out_tongue: I’ve used a custom attrbiute data-cust-ion-menu-opened="$root.openedMenu" on my body element.