Side menu problem

Ionic Framework ionic-v3
1

I am working on a simple application with ionic2 and made a side menu. Side menu works perfect on Firefox but not in ios/ android emulate.

<ion-menu id="right" [content]="content" side="right">
  <ion-header>
    <ion-toolbar color="secondary">
      <ion-title>My journey</ion-title>
      <button id="side-menu-icon" end ion-button menuToggle="right"></button>
    </ion-toolbar>
  </ion-header>

  <ion-content class="menu-content">
    <ion-list>
      <ul menuClose ion-item *ngFor="let menuItem of sideMenuItems">
        <a (click)="openPage(menuItem.id)">{{menuItem.content.header}}</a>
          <ion-list>
            <ul (click)="openPage(subItem.id)" *ngFor="let subItem of menuItem.children">{{subItem.content.header}}</ul>
        </ion-list>
      </ul>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
2

What’s exactly your problem? What doesn’t work as intended?

3

On android and ios emulate side menu is empty and side menu icon doesn’t appear but I can swipe it, and when I run it on firefox browser I can see side menu icon and side menu’s content appear.

4

Well I am seeing some strange markup, perhaps that’s got to do with it.

    <ion-list>
      <ul menuClose ion-item *ngFor="let menuItem of sideMenuItems">
        <a (click)="openPage(menuItem.id)">{{menuItem.content.header}}</a>
          <ion-list>
            <ul (click)="openPage(subItem.id)" *ngFor="let subItem of menuItem.children">{{subItem.content.header}}</ul>
        </ion-list>
      </ul>
    </ion-list>

You’re somehow trying to create a list, with an ul (unordered list), then a href, the in the href a list, in the ion-list again an unordered list… I’m not sure about what you’re trying to achieve, but I’m pretty sure that’s not how the markup is suggested in the documentation and it might be braking your interface on emulators. What about just creating a simpler structure and try that one out?

This should work if it’s just your template gone wrong:

   <ion-list padding>
        <button ion-item menuClose *ngFor="let menuItem of sideMenuItems"(click)="openPage(menuItem.id)">
          {{ menuItem.content.header }}
        </button>        
      </ion-list>

Also make ure you’re using the dev inspector to see what’s actually going on. Is there an error in there, or maybe the items aren’t even getting rendered or there’s a syntax error Firefox’ skipping and your emulator not? Or you’re trying to fetch the items first and it’s an async issue.

5

As @luukschoen said more politely, this is not valid HTML. li is the only allowed rendering child of ul.

1 Like