CODEWITHSUNDEEP
ionic-framework
Colin
Colin

Reputation: 22595

How to get vertical scroll in Ionic slide box

I would like to swipe sideways between sections of a questionnaire. Each section has a header and a number of answered questions. I would like to add a vertical scroll on the questions, but can't figure out how to get it working. Here is my view:

  <ion-view title="{{vm.title}}">
    <ion-slide-box show-pager="true" class="has-header">
        <ion-slide ng-repeat="s in vm.sections">
            <ion-item class="item-royal">
                {{s.Heading}}
            </ion-item>
            <ion-scroll>
                <div class="card" ng-repeat="q in s.Questions">
                    <div class="item item-divider">
                        {{q.Text}}
                    </div>
                    <div class="item">
                        {{q.Answer}}
                    </div>
                </div>
            </ion-scroll>
        </ion-slide>
    </ion-slide-box>
</ion-view>

Upvotes: 0

Views: 14777

Answers (4)

David Leonard
David Leonard

Reputation: 41

For Ionic 4 get it to scroll vertically with some css.

<ion-slide><div class="scrollVertically">stuff to scroll...</div></ion-slide>

.scrollVertically{
  overflow: auto;
  height: 100vh;
}

Upvotes: 4

shivam srivastava
shivam srivastava

Reputation: 460

I have solved this with this simple css:

ion-slides { height: initial; }

Upvotes: 1

Colin
Colin

Reputation: 22595

I found a solution that fixes the specific problem I was having, but creates another. I added a div to the ion-scroll and set heights on the ion-scroll and the new div:

<ion-scroll style="height:300px">
    <div style="height:100%">
        <div class="card" ng-repeat="q in s.Questions">
            <div class="item item-divider">
                {{q.Text}}
            </div>
            <div class="item">
                {{q.Answer}}
            </div>
        </div>
    </div>
</ion-scroll>

This causes two problems:

  1. I don't want to specify the height of the ion-scroll in pixels - I'd like it to fill the remaining space in the window.

  2. The pager appears in front of the scroll window - I'd like it to appear below.

EDIT Then I found a second solution:

 <ion-view title="{{vm.title}}">
        <ion-slide-box show-pager="true" class="has-header" 
                       style="position:absolute; bottom: 0;left: 0;right: 0; ">
            <ion-slide ng-repeat="s in vm.sections">
                <ion-item class="item-royal">
                    {{s.Heading}}
                </ion-item>
                <ion-content>
                    <div class="card" ng-repeat="q in s.Questions">
                        <div class="item item-divider">
                            {{q.Text}}
                        </div>
                        <div class="item">
                            {{q.Answer}}
                        </div>
                    </div>
                </ion-content>
            </ion-slide>
        </ion-slide-box>
    </ion-view>

Changes made

  1. Set the style of the ion-slide-box to position:absolute; bottom: 0;left: 0;right: 0; (The top is already specified by the has-header class)

  2. Use ion-content around the part I want to scroll instead of the ion-scroll and the div

  3. Live with the pager in front. It looks fine!

Edit 2 I'd also recommend using Crosswalk if you are having scroll problems with older Android devices.

Upvotes: 8

morrisonbrett
morrisonbrett

Reputation: 151

For ionic 2, you need to use <ion-slides>. <ion-slide-box> has been deprecated.

Upvotes: 0

Related Questions