Problems with scrolling list under a fixed section

ionic-v1
1

I have a menu app that I am working on that has a screen that shows categories/items as a list underneath a cart section. The categories/items are scrollable, but the cart section does not. This is demonstrated in the GIF in this topic.

The problem(s) I am having are the following:

  1. The scrollable categories/item section does not let you scroll all the way down to see the very last category (should be started and you can see it if you look real closely).
  2. The scroll works in the browser (not perfectly, but you can at least scroll), but when I run on an android device, I have to tap the categories/items multiple times and play around with the collapsible categories before I can get it to work.

image
Scroll Problems.gif311×510 311 KB

The markup looks like the following

` 

<div>
    <ion-content scroll="false" class="menu-categories">
        <div aria-checked="menu-summary">
            <ion-list class="menu-order-summary">
                <ion-item class="item-positive">
                    <div class="row">
                        <div class="col">
                            <i class="icon ion-ios-cart"></i> $14.99
                        </div>
                        <div class="col right">
                           <div class="right">Clear Cart <i class="icon ion-close-circled"></i></div>
                        </div>
                    </div>
                </ion-item>
            </ion-list>
            <ion-list class="menu-item-summary">
                <ion-item class="row col">
                    <div class="row">
                        <div class="col col-10">
                            <div>1x</div>
                        </div>
                        <div class="col col-60">
                            <div>Hamburger</div>
                        </div>
                        <div class="col">
                            <div class="right">$12.99</div>
                        </div>
                        <div class="col col-10">
                            <div class="right"><i class="icon ion-close positive"></i></div>
                        </div>
                    </div>
                </ion-item>
                <ion-item class="row col">
                    <div class="row">
                        <div class="col col-10">
                            <div>1x</div>
                        </div>
                        <div class="col col-60">
                            <div>Hamburger</div>
                        </div>
                        <div class="col">
                            <div class="right">$12.99</div>
                        </div>
                        <div class="col col-10">
                            <div class="right"><i class="icon ion-close positive"></i></div>
                        </div>
                    </div>
                </ion-item>
            </ion-list>
            <ion-list class="menu-order-summary">
                <ion-item class="item-positive">
                    <div class="row">
                        <div class="col">
                            Forty Niner Lunch Menu
                        </div>
                    </div>
                </ion-item>
            </ion-list>
        </div>
            <ion-scroll direction="y">
                <ion-list class="menu-categories">
                    <div ng-repeat="category in model.selectedMenu.categories | orderBy:'name'">           
                        <ion-item class="item-stable category"
                                    ng-click="toggleCategory(category)"
                                    ng-class="{active: isCategoryShown(category)}">
                            <i class="icon right" ng-class="isCategoryShown(category) ? 'ion-chevron-up' : 'ion-chevron-down'"></i>
                            &nbsp;{{category.name}}
                        </ion-item>
                        <ion-item class="item-accordion menu-item"
                                    ng-repeat="item in category.items | orderBy: 'name'"
                                    ng-show="isCategoryShown(category)">
                                    <div class="row">
                                        <div class="col col-75 item-name"><b>{{item.name}}</b></div>
                                        <div class="col"><b class="right">{{item.price | currency}}</b></div>
                                    </div>
                                    <div class="row col item-text-wrap">
                                        <div class="col col-95 item-description"><p>{{item.description}}</p></div>
                                    </div>
                        </ion-item>
                    </div>
                </ion-list>
            </ion-scroll>
</ion-content>
`

Any ideas on how to accomplish this? It seems like a reasonable user experience that a lot of apps use. Is there a better way for me to accomplish this given the provided GIF?

1 Like