Problem with side menus and pager views

1

his is an angularJS/ionic question

I basically have a sliding menu application. Each menu item opens up a view where I populate data. It all works great, but in one view, I want, say a ionic pager with slides. It seems the sliding menu does not let this control work. Either that or I’m doing something fundamentally wrong.

What happens is when I click on the “Events G” menu option it comes to the events graph html but the slides don’t show up properly at all. OTOH if I remove the side menu construct, the view works great.

My menu.html:

    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
          <h1 class="title">Options</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
    
    
            <!-- this view works great - its a normal view -->
            <ion-item nav-clear menu-close href="#/app/events">
                <span class=" item-icon-left">
                <i class="icon ion-ios-calendar-outline"></i>
                </span>
              Events
            </ion-item>
    
              <!-- this view messes up the display -->
              <ion-item nav-clear menu-close href="#/app/events-graphs">
                <span class=" item-icon-left">
                <i class="icon ion-ios-calendar-outline"></i>
                </span>
              Events Graph Tabs
            </ion-item>
    
            <ion-item menu-close href="#/app/filters">
                <span class=" item-icon-left">
                <i class="icon ion-funnel"></i>
                </span>
              Filters
            </ion-item>
    
            <ion-item nav-clear menu-close href="#/app/login">
                <span class=" item-icon-left">
                    <i class="icon ion-ios-gear-outline"></i>
                </span>
                Settings
            </ion-item>
    
          </ion-list>
        </ion-content>
      </ion-side-menu>
</ion-side-menus>

Now here is the code for “events-graphs”

I’m not posting any controller code because they are currently not doing anything relevant to this example.

<ion-view view-title="Monitor Event Summary" cache-view="false">
<ion-content>
      <ion-slide-box>
          <ion-slide-pager> </ion-slide-pager>
              <ion-slide>
                  <!-- <canvas tc-chartjs chart-type="bar" chart-options="options" chart-data="data" auto-legend></canvas> -->
                Slide 1
              </ion-slide>
              <ion-slide>
                   <div class="box blue"><h1>BLUE</h1></div>
              </ion-slide>
          <ion-slide>
                    Slide 3
              </ion-slide>

      </ion-slide-box>
   </ion-content>



</ion-view>

Here is what my app looks like when I move to the “Events Graph” view that should be showing a nice sliding window with 3 screens.
image

If I change the events-graph.html to instead display 3 tabs, I don’t see tab icons and the content gets hidden under the nav bar - so I am pretty sure I am not doing something right in the side menu - but I can’t figure out what. Any ideas?

2

I added a simple codepen - see the “Help” option. IT tries to display a slider