Side menu not showing on android phone

ionic-v1
1

Hi , I am having a strange problem regarding the side menu. I have used a side menu in my app and it is working fine in latest webkit browsers (chrome) on my PC. But when i tested it on a android phone side menu just disappeared. I mean the side-menu-content is sliding but the menu itself is not showing. Is this a problem with android version or i made a mistak somewhere . Please tell me if anyone having similar issues. I have used native browser of the phone with ice-cream sandwich version. I have also checked it on the Android 4.1 (Jelly Beans)

2

Are you able to test if this is also an issue with Android 4.2 or higher?

3

I can confirm it completely doesn’t works on Android.

4

I have tested it on android emulator with version 4.3. Menu is not showing at all.

5

Hmm. It’s working for me. All I’m noticing is on the Moto G in Chrome the dragging isn’t working.

Do you guys have any test code we can play with?

6

Check mine, I ave the same issue too.

http://tivelab.com/apps/enjoythehat/test.html

7

Having same problem. On emulator and device - device is 4.2 Samsung s2.
All I did was take the ionic-seed code and add the side-menus stuff from the tutorial guide pages and no good on android. works well on ios. On android on emulator side menu does nothing. on android on device (4.2) only the navbar slides.

hope this helps
cheers
Darren

8

Exact same problem I had. Side menus are not working on emulator even with 4.3 device. I did some digging around and guess thats the problem with Android’s WebView. In ionic the latest CSS3 animations are used which are not properly supported by Android’s prior versions. They are working fine with latest Android 4.4.

9

in my new phone is exactly the same, doent show the content! only i can see the side panel but no the content my phone is a motorola razr d1

10

Just posted a bug, please track updates on this here and we’ll see about getting it fixed. Thanks! https://github.com/driftyco/ionic/issues/371

11

I’m still having a lot of trouble reproducing this. Does anyone have an example that is broken that I could try testing with?

Thanks!

12

I’m having the same problem here, the side menu on the example project does not work on Android 4.1 to 4.3, but works fine on Android 4.4

13

Hate to say this, but I’m having the same problem on iOS device (iPhone 5) and iOS simulator. Only works in web browser. It’s the example project on the ionic site, the projects side view does not list the projects (nor the one created at the beginning or others added later)

14

Noticing this on iOS as well. Works fine in Safari on the phone, but the bundled app shows a blank side nav menu (my login form button is also truncated, which may be a clue).

index.html:

  <body ng-app="sts" ng-controller="DriverAppCtrl" class="ionic">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </body>

checkpoint-list.html (which is rendered by the ion-nav-view)

<div ng-show="!session.credentials.driver">
    <ion-header-bar>
        <h1 class="title">Login</h1>
    </ion-header-bar>



   <div class="content has-header" ng-controller="LoginCtrl">
        <form role="form" ng-submit="login(username, password)">
            <div class="list">
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="tel" ng-model="username"/>
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" ng-model="password"/>
                </label>
            </div>
            <div style="padding:0 30px 30px"><!-- the bottom of this button is cut off in emulation, but shows correctly in safari. Something to do with inline CSS? -->
                <button type="submit" class="button button-positive button-block">Sign In</button>
            </div>
        </form>
    </div>

</div>

<ion-side-menus ng-show="session.credentials.driver">
    <!-- Center content -->
    <ion-side-menu-content drag-content="false">
        <ion-header-bar class="bar-stable">
            <button class="button button-icon" menu-toggle="left">
                <i class="icon ion-navicon"></i>
            </button>
            <h1 class="title"><!-- header stuff omitted --></h1>
        </ion-header-bar>
        <ion-content scroll="true">
            <ion-refresher
                    pulling-text="Pull to refresh..."
                    on-refresh="sync()">
            </ion-refresher>

            <ion-list>
                <!-- list stuff omitted -->
            </ion-list>
        </ion-content>
    </ion-side-menu-content>
    <!-- Left menu -->
    <ion-side-menu side="left" class="settings">
        <ion-header-bar class="bar-dark">
            <button class="button button-icon ion-close" menu-toggle="left"></button>
            <h1 class="title">Settings</h1>
        </ion-header-bar>
        <ion-content scroll="false">

            <button class="button button-block button-large button-light ion-clock" ng-click="clockInOut()">
                <span ng-show="session.credentials.driver.clockedIn">Clock Out</span>
                <span ng-show="!session.credentials.driver.clockedIn">Clock In</span>

            </button>

            <a class="button button-block button-large button-light ion-ios7-telephone" href="tel:4155551234">
                Call Dispatch
            </a>

            <button class="button button-block button-large button-light ion-log-out" ng-click="logout()">
                Sign Out
            </button>
        </ion-content>

    </ion-side-menu>

</ion-side-menus>