Side menu not visible on ios emulator


#1

My side menu is visible when debugging in chrome but not in an emulator. When on an emulator I can click the blank area where the icons and text should be and can navigate to other views. I saw other posts with similar problems but no solutions.Any ideas?


#2

What version of ionic are you using? What version of iOS? Can you post a codepen?


#3

I am using Ionic, v1.0.0-beta.6 and the simulator is IOS 7.1(11D167). I start the simulator with “cordova emulate ios --target=“ipad””


#4

I used the sidemenu template from the CLI and couldn’t reproduce it. Can you try to create a sidemenu starter project with our CLI and see if it works there? It could be an issue with the markup.


#5

Below is how my index.html layout.

<div ng-controller="menu">    
    <ion-side-menus ng-cloak class="ng-cloak">
        <!-- Center content -->
        <ion-pane 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-view></ion-nav-view>
        </ion-pane>
        <!-- Left Side Menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar-positive">
            </ion-header-bar>
            <ion-content has-header="true" scroll="false" ng-cloak class="ng-cloak">
                <ion-list>
                    <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list">
                        <i ng-class="item.iconClass"></i>
                        <span ng-bind="item.text"></span>                          
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>    
</div>

#6

Change this

<ion-pane ion-side-menu-content></ion-pane>

to this

<ion-side-menu-content></ion-side-menu-content>

Also, why are you using ng-cloak?


#7

Thank you. Your suggestions fixed my problem. I believe it was the ng-cloak. I have no idea why I had it in there.