Using ion-scroll to create an independent scrolling ion-list?

ionic-v1
1

Hi,

I’m working on my first ionic framework project. I want to create two areas for an ipad landscape view. The rightmost column is a list of items. The larger left column is the detail view (something like an iOS split view).

<ion-view title="Events" class="row">
<ion-content scroll="false">
    <div class="row">
        <div class="col col-25">
            <ion-list>
                <ion-scroll>
                    <ion-item>start</ion-item>
                    <ion-item>start</ion-item>
                    <ion-item>start</ion-item>
                    <ion-item>start</ion-item>
                    <ion-item>start</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>hi</ion-item>
                    <ion-item>end</ion-item>
                    <ion-item>end</ion-item>
                    <ion-item>end</ion-item>
                    <ion-item>end</ion-item>
                    <ion-item>end</ion-item>
                    <ion-item>end</ion-item>
                </ion-scroll>
            </ion-list>
        </div>
        <div class="col col-75">
            <div>
                <p>hi</p>
            </div>

        </div>
    </div>
</ion-content>

The above html creates the split view, and the rightmost column scrolls, but it won’t scroll past the first page.

Any hints as to what I’m doing wrong / misunderstanding?

Thanks!

– jp

2

I ended up solving my problem like this:

<ion-view title="Events">
<ion-content style="width:300px; border-right: 2px solid lightgrey;">
    <ion-list>
        <ion-item>start</ion-item>
        <ion-item>start</ion-item>
        <ion-item>start</ion-item>
        <ion-item>start</ion-item>
        <ion-item>start</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>hi</ion-item>
        <ion-item>end</ion-item>
        <ion-item>end</ion-item>
        <ion-item>end</ion-item>
        <ion-item>end</ion-item>
        <ion-item>end</ion-item>
        <ion-item>end</ion-item>
    </ion-list>
</ion-content>
<ion-content style="margin-left:300px; padding:10px;">
    detail area
</ion-content>
2 Likes