Multiple Scrolling Lists Within a View?

All,

I have the following view in which I have two lists. I would love to be able to have the lists scroll instead of the page scroll. Any and all suggestions are greatly appreciated. Code is below.

<ion-view title="Vote">
<ion-content class="padding">
<h3 class="title">Voting Booth</h3>
    <div ng-show="model.teams.length > 0">
        <div>
            <h4>Teams</h4>
            <ion-list scroll="true">
                <ion-item ng-repeat="team in model.teams" class="item" ng-click="openActionSheet('team', team)">
                    {{team.name}}</ion-item>
            </ion-list>
        </div>
        <div>
            <h4>Contestants</h4>
            <ion-list scroll="true">
                <ion-item ng-repeat="contestant in model.contestants" class="item" ng-click="openActionSheet('contestant', contestant)">{{contestant.name}}</ion-item>
            </ion-list>
        </div>
    </div>
    <div ng-show="model.teams.length == 0">
        <div class="card">
            <div class="item item-divider">
                No Data
            </div>
            <div class="item item-text-wrap">
                No teams and contestants for this event have been assigned yet!
            </div>
        </div>
    </div>
</ion-content>

You could set the scroll parameter of the ion-content to false:

<ion-content class='padding' scroll='false'>

For all parameters take a look at the ion-content Documentation.
Does that fix your problem?

Another way you could possibly do it is like Saimon said, you could make the ion-content scroll’s false and then create two separate ion-scroll to create a different scroll for each list. http://ionicframework.com/docs/api/directive/ionScroll/

You’ll need to make sure you set a height on each ion-scroll.

Note, if you plan on using a collection-repeat in this view you will need the ion-content's scroll.

Hi Saimon

Thank you for your reply. I tried that approach and it froze the page as I wanted, but unfortunately did nothing for the lists.

Bruce

Hi Cameron,

Thanks for your reply. I believe I tried your suggestion prior to posting with no luck, but I didn’t do anything with the height. I will try that tonight. I am not using collection repeat, but I am using ng-repeat as the lists should be fairly small. Hopefully that doesn’t mess things up.

Bruce

@saimon and @cameronbourke,

Thanks much for your replies and your help. Between both your posts, I got everything working. Can’t wait to get this app published. It’s almost there…

Bruce

1 Like