Issues with ion side menu appearing on screen

ionic-v1
1

I’m a beginner working with Ionic framework. I’ve checked out all the tutorials regarding the side menu, but it doesn’t seem to work for me when I place the my ion-header and ion-list between the ion-side-menu-content /ion-side-menu-content section (nothing is showing on screen). I’m using IBM Worklight as tool build the app(I have it working/setup correctly).

My index.html has the following:

//body//
//ion-nav-view ion-nav-view//
//body//

My home.html has (ion-header and ion-list)

//ion-header-bar align-title=“center” class=“bar-positive”
//div class=“buttons”
//button class=“button button-small button-icon icon ion-ios7-cart” button//
div//
ion-header//

//ion-list
//ion-item Test 1 ion-item//
//ion-item Test 2 ion-item//
ion-list//

This page displays fine, but when I wrap it within the ion-side-menu format, nothing shows on screen.

//ion-side-menus
// ion-side-menu-content
///////////This is where I placed the content(ion-header & ion-list)
ion-side-menu-content//

//ion-side-menu side="left"
ion-side-menu//

ion-side-menus//

Could someone let me know what I’m doing wrong?

2

Take a look at this.

  <ion-side-menus>
    
    <ion-side-menu-content>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Title</h1>
      </ion-header-bar>
      
      <ion-content>
        <ion-list>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content> 
    
    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
       <ion-list>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
    
  </ion-side-menus>
3

hmm…I’ve added this to my body tags, but still nothing appears on screen. It almost like something is preventing it from showing. If I remove the ion-side-menu format and leave a ion-header and ion-list(just for testing purposes), the screen displays a list with a header
. I’m not sure what is blocking when I add the ion-side-menu-content format.

4

I upgraded to the latest version and now it seems to work. Weird. Thanks for your help!

1 Like