# Scroll content inside a slide-box slide?

**URL:** <https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505>\
**Category:** ionic-v1\
**Created:** [January 13, 2014, 7:20pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505 "2014-01-13T19:20:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jfrench](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jfrench/32/64095_2.png) [@jfrench](https://forum.ionicframework.com/u/jfrench)\
**Post date:** [January 13, 2014, 7:20pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/1 "2014-01-13T19:20:30Z")

</div>

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

```auto
<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](http://plnkr.co/edit/yFVyvWqNCQ8p9Z3Fc1IH?p=preview)

---

<div class="post-metadata">

**Author:** ![xAlien95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xalien95/32/7507_2.png) [@xAlien95](https://forum.ionicframework.com/u/xAlien95)\
**Post date:** [January 13, 2014, 7:47pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/2 "2014-01-13T19:47:30Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [January 13, 2014, 8:17pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/3 "2014-01-13T20:17:16Z")

</div>

`<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>
```

---

<div class="post-metadata">

**Author:** ![jfrench](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jfrench/32/64095_2.png) [@jfrench](https://forum.ionicframework.com/u/jfrench)\
**Post date:** [January 13, 2014, 9:55pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/4 "2014-01-13T21:55:55Z")

</div>

Ahhh, works great! Thanks!

---

<div class="post-metadata">

**Author:** ![msimonc](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@msimonc](https://forum.ionicframework.com/u/msimonc)\
**Post date:** [March 1, 2014, 4:24am UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/5 "2014-03-01T04:24:52Z")

</div>

Footnote: Footnote: Footnote:

> [@msimonc](#):
>
> \<content\>, \<slide-box\> and \<slide\> are now \<ion-content\>, \<ion-slide-box\> and \<ion-slide\>. Also \<ion-content scroll=“true”\> worked.

---

<div class="post-metadata">

**Author:** ![somentelucas](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/somentelucas/32/64636_2.png) [@somentelucas](https://forum.ionicframework.com/u/somentelucas)\
**Post date:** [April 11, 2014, 9:40pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/6 "2014-04-11T21:40:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [April 12, 2014, 3:44pm UTC](https://forum.ionicframework.com/t/scroll-content-inside-a-slide-box-slide/505/7 "2014-04-12T15:44:40Z")

</div>

See this forum post for a sample of slides with dynamic heights : [Slide-box Dynamic Height](http://forum.ionicframework.com/t/slide-box-dynamic-height/2149/3)