Allan Macmillan Allan Macmillan - 4 years ago 202
AngularJS Question

Stop some content scrolling in Ionic

I am using different templates in Ionic for each View. I want the search bar to remain in the same place and allow the results to scroll but currently the whole view is scrolling. Thoughts?





Record album

<span class="item-note">
Grammy
</span>
</button>
<div class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="searchTerm">
</div>
</div>
<ion-list>
<ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}">
<h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2>
<p>{{psalm.metre}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>

</ion-item>
</ion-list>




Answer Source

You need to disable scrolling for your parent <ion-content> via scroll="false" and add <ion-scroll>.

Your <ion-list> would be wrapped like this:

<ion-scroll direction="y">
    <ion-list>
        <ion-item class="item-remove-animate item-icon-right" ng-repeat="psalm in psalms | filter: {psalm: searchTerm}" type="item-text-wrap" href="#/tab/psalm/{{psalm.id}}">
            <h2>Psalm {{psalm.psalm}} {{psalm.version}}</h2>
            <p>{{psalm.metre}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>
</ion-scroll>

See ion-scroll and ion-content

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download