ioscordovaionic-frameworkionic4side-menu

Ionic: Getting blank sidemenu on iOS simulator?


I'm getting a blank side menu screen on iOS simulator although options are clickable. This issue does not occur while running the app on browser OR android phone. I'm using the lastest of ionic and Xcode. Please let me know how to fix this. Thanks in advance. I have added type="overlay" and ion-split-pane but nothings work

enter image description here

**app.component.html**

<ion-app>
  <ion-menu side="start" menuId="lamb-menu" contentId="lamb-side-menu">
    <app-side-menu></app-side-menu>
  </ion-menu>
  <ion-router-outlet id="lamb-side-menu"></ion-router-outlet>
</ion-app>
**side-menu.component.html**

<ion-content>
  <div class="navbar">
    <a class="nav-open"><span class="icon nav-icon"></span></a>
    <div class="side-nav">
      <div class="nav-top">
        <a class="logo">
          <img src="../../assets/images/logo.png" alt="logo" />
        </a>
        <h1>MTC Ltd. Chennai</h1>
      </div>
      <div class="nav-list">
        <div class="nav-item" (click)="navigatePage('nearby-stops')"><a [ngClass]="this.selectedRoute === '/home/nearby-stops' ? this.className : ''"><span class="icon nav-home-icon"></span>{{"SIDE_MENU.HOME" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('planner')"><a [ngClass]="this.selectedRoute === '/home/planner' ? this.className : ''"><span class="icon nav-trip-icon"></span>{{"SIDE_MENU.TRIP_PLANNER" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('stops')"><a [ngClass]="this.selectedRoute == '/home/stops' ? this.className : ''"><span class="icon nav-stops-icon"></span>{{"SIDE_MENU.STOP" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('favorites')"><a [ngClass]="this.selectedRoute == '/home/favorites/favoriteTrips' || this.selectedRoute == '/home/favorites/favoriteRoutes' ? this.className : ''"><span class="icon nav-favourite-icon"></span>{{"SIDE_MENU.FAVORITE" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('planner/places')"><a [ngClass]="this.selectedRoute == '/home/planner/places'  ? this.className : ''"><span class="icon nav-places-icon"></span>{{"SIDE_MENU.SAVED_PLACE" | translate}}</a></div>
        <div class="nav-item visible-mobile" (click) = "navigatePage('settings')" ><a [ngClass]="this.selectedRoute == '/home/settings' ? this.className : ''"><span class="icon nav-sos-icon"></span>{{"SIDE_MENU.SETTINGS" | translate}}</a></div>
        <!-- <div class="nav-item visible-mobile" ><a [ngClass]="this.selectedRoute == '/home/settings' ? this.className : ''"><span class="icon nav-sos-icon"></span>{{"SIDE_MENU.SETTINGS" | translate}}</a></div> -->
        <div class="nav-item" (click)="navigatePage('changeCity')"><a [ngClass]="this.selectedRoute === '/home/changeCity' ? this.className : ''"><span class="icon nav-city-icon"></span>{{"SIDE_MENU.CHANGE_CITY" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('changeLanguage')"><a [ngClass]="this.selectedRoute === '/home/changeLanguage' ? this.className : ''"><span class="icon nav-language-icon"></span>{{"SIDE_MENU.CHANGE_LANGUAGE" | translate}}</a></div>
        <div class="nav-item visible-mobile" (click)="feedback()"><a><span class="icon nav-feedback-icon"></span>{{"SIDE_MENU.FEEDBACK" | translate}}</a></div>
        <!-- <div class="nav-item"><a [ngClass]="this.selectedRoute == '/home/termsAndConditions' ? this.className : ''"><span class="icon nav-terms-icon"></span>{{"SIDE_MENU.TERMS_AND_CONDITIONS" | translate}}</a></div> -->
      </div>
    </div>
  </div>
</ion-content>
**Ionic Info**

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, browser 5.0.4, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run                             : 1.0.0

System:

   ios-sim : 8.0.2
   NodeJS  : v12.16.2 (/usr/local/bin/node)
   npm     : 6.14.4
   OS      : macOS Catalina
   Xcode   : Xcode 11.4.1 Build version 11E503a

Solution

  • Got the solution, it was HTML template issue. I have to rewrite the HTML and CSS part to make it run on iOS.