List scrolling in side menu

4zm · December 19, 2014, 12:27pm

I’ve put a list inside a side menu, but for some reason it doesn’t scroll (vertically, like normal lists). Instead it is clipped as the list goes outside the screen boundary.

Are there any special considerations to be aware of that can cause problems like this? Can you spot something wierd, I think it looks simple enough?

Here is the template code for the menu & list:

github.com

alltatalla/stadsbild/blob/master/www/map/index.tpl.html

<ion-side-menus>

  <ion-pane ion-side-menu-content>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7"></ion-nav-bar>

    <ion-nav-view name="mapView" animation="slide-left-right"></ion-nav-view>

  </ion-pane>

  <ion-side-menu side="left">
    <ion-nav-view name="menuView"></ion-nav-view>
  </ion-side-menu>

</ion-side-menus>

github.com

alltatalla/stadsbild/blob/master/www/map/menu.tpl.html

<ion-view>
  <ion-content class="header-menu">
      <ion-list>

        <ion-item class="side-menu-separator item-icon-right"
                  ng-click="menu.struggles.expanded = !menu.struggles.expanded">
          <b>Platser</b>
          <i class="icon small-icon"
             ng-class="{'ion-plus': !menu.struggles.expanded, 'ion-minus': menu.struggles.expanded}" ></i>
        </ion-item>

        <ion-item class="side-menu-item item-icon-left"
                  ng-show="menu.struggles.expanded"
                  ng-class="{'active': selectedStruggle(struggle.id)}"
                  ng-repeat="(struggleKey,struggle) in struggles track by struggle.title"
                  ng-click="go('struggle/' + struggle.id)"
                  on-hold="selectStruggle({{struggle.id}})">
          <i class="icon small-icon ion-home"></i>
          {{struggle.shorttitle}}
        </ion-item>

This file has been truncated. show original

PS. Not sure if I should use the ion-content & ion-view wrapping. It doesn’t work eighter way though. DS.

Thamil · December 19, 2014, 2:44pm

@4zm hey try like this.

<ion-side-menu-content edge-drag-threshold="true">

</ion-side-menu-content>

<ion-side-menu side="right">
    <ion-header-bar class="bar-balanced">

    </ion-header-bar>
    <ion-content class="has-header header-menu">

        <ion-list>

            <ion-item nav-clear menu-close ng-href="#/menu" class="clickable item-icon-left">
                <i class="ion-ios7-paper"></i> Profile
            </ion-item>
            <ion-item nav-clear menu-close ng-href="#/menu" class="clickable item-icon-left">
                <i class="ion-ios7-paper"></i> Profile
            </ion-item>
            <ion-item nav-clear menu-close ng-href="#/menu" class="clickable item-icon-left">
                <i class="ion-ios7-paper"></i> Profile
            </ion-item>
            <ion-item nav-clear menu-close ng-href="#/menu" class="clickable item-icon-left">
                <i class="ion-ios7-paper"></i> Profile
            </ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>

4zm · December 19, 2014, 2:59pm

Fantastic, that works like a charm.

Thanks a lot!