Side menu disappears after a while

1

Hi,

I am using an Android 4.3 galaxy s3 device.

I implemented a side menu which renders fine on the browser. But when I test it on the device, it disappears after a while (specifically, it fades out). However all the items on it are clickable and otherwise, it works.

Any ideas on why this might be happening?

Thanks

2

Can you provide some sample code? Kind of hard figuring out the issue with out it

3

These are the essential elements of the snippet:

a) Side menu code

b) Directive to include background
.directive(‘backgroundImage’, function($compile, $animate) {
return {
restrict: ‘E’,
template: ‘

’,
// template: ‘’,
replace: true,
scope: true,
link: function($scope, $element, $attr) {
if($scope.url) {
console.log(“Checking it out”);
console.log($scope.url);
$element[0].style.backgroundImage = ‘url(’ + $scope.url + ‘)’;
}
}
}
});

It works fine on the Nexus where the background loads up on issuing a command, but fails with the S3 where the background fades in and the side menu fades out.

4

What version of Ionic are you using? Theres some problems with your markup, the side menu content is written wrong. Give this a shot.

<ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
        </button>
      </ion-nav-buttons>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
5

I’m using 0.9.26. Is there a quick way to update ionic or do I have to download the latest ionic.bundle.js to make this code run?

With 0.9.26, the menu doesn’t open up at all on making this change.

6

Well since 0.9.26, there has been some significant api changes and fixes. I recommend you update to the latest version, 1.0 beta, and take some time to look at the change in markup.

Best place to start is to reference the docs.

7

Will do. I’m assuming this will break a lot of my old UI? Also, is there a CLI call to update the version, or do I have to download the latest version and replace my current ionic libraries?

Thanks for the reply.

8

The current release of the cli is up to date, it will pull the latest stable version, 1.0 beta. But to make sure your version of the cli is up to date, run this in your terminal

sudo npm update -g ionic

Then from there, you can follow this guid on how to set things up. There’s some changes in it and three templates you can start form, really awesome stuff.

Hope this helps!

9

Oh, we’ve been using 0.9.26 and made quite a bit of progress already. Worried about the rewrites.

10

There are going to be some rewrites here and there, mostly update names of functions and delegates, but there are going to be a lot of benefits to this. Ionic has had a lot of issues fixed and have improved performance.

IMO the process of having to update code will be worth it for a much more stable system.

11

Thanks again. Would you happen to have a logsheet with the big changes? So that we know which parts of the code need addressing instead of having to plough through everything.

12
13

Ok, I went ahead and updated to 1.0.0. I get the side view on Nexus 5 but still don’t get it on the S3.

After some more tinkering we found this to help.

Change postion:inherit for background image of main content. This will let the bg have the same css property as the main content area. Otherwise it leaks into the side menu area for S3 but not for Nexus (Inconsistent).

14

Awesome, so it works now?

15

Yes. It’s works fine if I put position:inherit. But surprisingly I don’t need that line for nexus, only the S3.