Scroll content inside a slide-box slide?

ionic-v1
1

I’m attempting to create a slide-box that has vertically scrollable cards in each slide. The mark up is like this:

<content has-header="true" scroll="false">
<slide-box>
    <slide>
        <h4 class="padding-horizontal">Most Popular</h4>
                <scroll>
                    <div class="list card" ng-repeat="product in mostPopular">
                        <div class="item">
                            {{ product.name }}
                            <span class="item-note">{{ product.price | currency }}</span>
                        </div>
                        <div class="item item-image">
                            <img ng-src="{{ product.img }}" alt="{{ product.name }}"/>
                        </div>
                        <div class="item item-divider padding-bottom">
                            <span class="item-note">{{ product.comment }}</span>
                        </div>
                    </div>
                </scroll>
    </slide>
//More slides like the one above.
</slide-box>
</content>

The result is that when I scroll the content is simply bounces back to the top of the scrollable section. Is this a bug or am I doing this wrong?

UPDATE: Here’s a Plunker that demonstrates the issue http://plnkr.co/edit/yFVyvWqNCQ8p9Z3Fc1IH?p=preview

2

Hi @jeff_french, if you would to use the <scroll> directive, you’ll need to set the height for vertical scrolling.

<scroll style="height:400px">
</scroll>

You could also set an optional attribute:

<scroll direction="y" style="height:400px">
<scroll direction="x" style="height:400px">

Hope this helps :slight_smile:

3

<scroll> works, you can also use <content>:

       <slide>
          <content has-header="true">
            <div style="width: 300px; height: 2000px; background: url('tree_bark.png') repeat"></div>
          </content>
        </slide>
4

Ahhh, works great! Thanks!

5

Footnote: Footnote: Footnote:

6

Hi @msimonc,

Any suggestions on how I could implement the slide with different heights of scroll areas?

<ion-content has-header="true" scroll="true">
    <ion-slide-box>
        <ion-slide>
            CONTENT WITH HEIGHT 800px
         </ion-slide>
    </ion-slide-box>
    <ion-slide-box>
        <ion-slide>
            CONTENT WITH HEIGHT 1400px
         </ion-slide>
    </ion-slide-box>
</ion-content>

This makes the first slide with 1400px instead of 800px.
Is that possible that each one has different heights?

2 Likes
7

See this forum post for a sample of slides with dynamic heights : Slide-box Dynamic Height