Side menu content with expose-aside-when does not resize when window resizes

ionic-v1
1

This occurs for every window that gets resized (user manually resizing, changing between portrait/landscape, etc.). Here is an example using the sidemenu template and the browser platform:

ionic start myApp sidemenu
ionic platform add browser
Add expose-aside-when=“large” to ion-side-menu
ionic build
ionic serve

Then resize your browser window and the Search, Browse, and Playlists content’s width will not automatically resize with the browser window until the side menu collapses. However, once your browser window is large enough again, the content width resizes only to its immediate size. If I don’t use expose-aside-when, everything resizes just fine.

Below is an example of slowly widening the browser window, the side menu appears, the Browse content immediately resizes to browser’s width, but then stops:

image
Pasted image999×723 11.7 KB

Below is an example of quickly widening the browser window, the side menu appears, the Browse content immediately resizes to browser’s width, but then stops:

image
Pasted image2198×722 16 KB

Note the Browse content width difference between the images.

I am new to Ionic. This looks like an issue to me. Is this an issue or am I expected to handle this resizing myself? If this is an issue, any suggestions for workarounds would be greatly appreciated!

2

As a side note, I am new to Ionic too so i could not be in the right direction…

Same issue here on desktop browser (out off topic but i need to handle it too, not just mobile device). Just checking source and looks like because of resize handler beeing called only on media query status changed inside exposeAsideWhen directive.

Now the fun part is that just checking Ionic v1.2.4-nightly-2613 source, this directive has changed. It differs from the v1.2.4, binding resize window handler.
It looks like a regression regarding mobile device, not only firing event when media query status change, but at least handle specific desktop browser device correctly.

Currently, the simple fix i guess is just to set a new directive copy/paste from the nightly one:

.directive('exposeAsideWhen', ['$window', function($window) {
  return {
    restrict: 'A',
    require: '^ionSideMenus',
    link: function($scope, $element, $attr, sideMenuCtrl) {

      var prevInnerWidth = $window.innerWidth;
      var prevInnerHeight = $window.innerHeight;

      ionic.on('resize', function() {
        if (prevInnerWidth === $window.innerWidth && prevInnerHeight === $window.innerHeight) {
          return;
        }
        prevInnerWidth = $window.innerWidth;
        prevInnerHeight = $window.innerHeight;
        onResize();
      }, $window);

      function checkAsideExpose() {
        var mq = $attr.exposeAsideWhen == 'large' ? '(min-width:768px)' : $attr.exposeAsideWhen;
        sideMenuCtrl.exposeAside($window.matchMedia(mq).matches);
        sideMenuCtrl.activeAsideResizing(false);
      }

      function onResize() {
        sideMenuCtrl.activeAsideResizing(true);
        debouncedCheck();
      }

      var debouncedCheck = ionic.debounce(function() {
        $scope.$apply(checkAsideExpose);
      }, 300, false);

      $scope.$evalAsync(checkAsideExpose);
    }
  };
}]
3

Thanks for tracking down the issue to the resize handler. You appear to be less new then me. :slightly_smiling: Using your reverted code above has temporarily solved my problem. However, I had to paste carefully to make sure that I also included the leading ‘IonicModule’ and trailing ‘);’

4

Any ideas when a 1.2.5 will be available to fix this?