Scroll in ion-side-menu view wont work

ionic-v1
1

I’m building a shopping-cart library for ionic and have a an ion-side-menu with that contains a directive contains an ng-repeated div.

For some reason, I can’t get it to scroll:

Here is my code:

<ion-side-menus>

  <ion-side-menu-content>
    <!-- SIDE MENU CONTENT HEADER -->
    <ion-header-bar class="bar-dark">
      <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
        <h1 class="title">Ionic Shopping Checkout</h1>
      <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
    </ion-header-bar>
    <!-- SIDE MENU CONTENT -->
    <ion-content>
      <ion-purchase></ion-purchase> 
    </ion-content>
    <!-- SIDE MENU CONTENT FOOTER -->
    <ion-purchase-footer></ion-purchase-footer> 

  </ion-side-menu-content>

  <ion-side-menu side="right">
      <!-- SIDE MENU RIGHT CONTENT HEADER -->
      <ion-header-bar class="bar-dark">
        <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
        <h1 class="title">Ionic Shopping Cart</h1>
        <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
      </ion-header-bar>
      <!-- SIDE MENU RIGHT CONTENT -->
        <ion-cart products='products'></ion-cart>
      <!-- SIDE MENU RIGHT CONTENT FOOTER -->
      <ion-purchase-footer></ion-purchase-footer>
  </ion-side-menu>

</ion-side-menus>

Here is the code within the ion-cart directive :

<div class='card product-card' ng-repeat='product in products track by $index'>
  <div class='item item-thumbnail-right product-item'>
    <img ng-src='{{product.image}}' class='product-image'>
    <h3 class='product-title'>{{product.title}}</h3>
    <p class='product-description'>{{product.description}}</p>

    <i class='icon ion-plus-round icon-plus-round' ng-click='addProduct(product)'></i>
       <span class='product-quantity'>{{product.quantity}}</span>
    <i class='icon ion-minus-round icon-minus-round' ng-click='removeProduct(product)'></i>

    <span class='product-price'>${{product.price}}</span>
  </div>
</div>
<div>

Any thoughts as to how to get it to scroll would be awesome!

Thanks!

2

This is because you dont have a ion-content in your side-menu

  <ion-side-menu side="right">
      <!-- SIDE MENU RIGHT CONTENT HEADER -->
      <ion-header-bar class="bar-dark">
        <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
        <h1 class="title">Ionic Shopping Cart</h1>
        <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
      </ion-header-bar>

      <!-- SIDE MENU RIGHT CONTENT -->
      <ion-content> 
         <ion-cart products='products'></ion-cart>
      </ion-content> 
      <!-- SIDE MENU RIGHT CONTENT FOOTER -->
      <ion-purchase-footer></ion-purchase-footer>
  </ion-side-menu>
3

@mhartington I’ve tried that and when I wrap the ion-cart like that with the ion-content, the scroll still doesn’t work, and everything becomes un-clickable(my event handlers stop working).

4

what version of ionic are you using? Can you try this with the nightly builds?

5

@mhartington I’m using ionic beta 5:

 * Ionic, v1.0.0-beta.5
 * A powerful HTML5 mobile app framework.
 * http://ionicframework.com/

However, i’ll download the nightly now and let you know.

6

@mhartington Beta.5b fixed it! Thanks!

1 Like