Dynamic ion-side-menu width?

ionic-v1
1

Hi,

Just getting started with Ionic/Angular so apologies if this is a silly question.

I’m trying to get an ion-side-menu that changes size depending on the user’s screen resolution.

I’ve got something like this:

<ion-side-menu side="left" width="{{width}}">

Which works fine on the initial page load.

The trouble is if the user resizes the screen (or, more to the point, rotates their device to landscape)

I have this code to watch the resize event and update the width:

$scope.$watch(function(){
   return $window.innerWidth;
}, function(value) {
    $scope.width = value * 0.4;
});

But this doesn’t seem to work - when the side menu is toggled it only comes out to the width it had when the page first loaded - not the new width caused by the user switching to landscape.

I’m guessing the width is stored somewhere on first load and not subsequently updated.

Anyone have any ideas how I could get this to work?

Many thanks!

1 Like
2

Did you find any solution for this?

1 Like
3

How did you solved it?

4

@PedlarCo Did you find any solution for this?

5

In your scss file,

ion-menu[side=left] .menu-inner {
    width: 70%;
}

use this.

6

@akr_rajkumar I want to change width of left menu when clicking on button which fires a click event and change the width respective to the width variable. For this issue, I have created question Ionic left menu slider width not updated when width variable increase in js