# Layout with ScrollView

**URL:** <https://forums.fusetools.com/t/layout-with-scrollview/2624>\
**Category:** How-to Discussions\
**Created:** [January 27, 2016, 3:42am UTC](https://forums.fusetools.com/t/layout-with-scrollview/2624 "2016-01-27T03:42:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![oskar](https://avatars.discourse-cdn.com/v4/letter/o/f07891/32.png) [@oskar](https://forums.fusetools.com/u/oskar)\
**Post date:** [January 27, 2016, 3:42am UTC](https://forums.fusetools.com/t/layout-with-scrollview/2624/1 "2016-01-27T03:42:33Z")

</div>

Hello,

Basically, I want to have this layout:

- TopBar (60pt height)

- ScrollView (all available space in between)

- BottomBar (60pt height)

But I can’t, If I don’t specify height in ScrollView, it takes the whole height placing itself on top of the bottombar which is not visible anymore, it doesn’t respect the BottomBar. I tried adding a 60pt bottom margin to ScrollView as well but same result.

```auto
<Page ux:Name="home">
  <StackPanel>
    <Header Dock="Top" Height="60" />
    <ScrollView>
       <StackPanel>
        <Panel ux:Name="panel1" Height="80" Background="#F44336" />
        <Panel Height="200" Background="#ddd"/>
        <Panel Height="200" Background="#bbb"/>
        <Panel Height="200" Background="#999"/>
        <Panel Height="200" Background="#777"/>
        <Panel Height="200" Background="#444"/>
        <Panel ux:Name="panel2" Height="80" Background="#3949AB" />
      </StackPanel>
    </ScrollView>
    <BottomBar Dock="Bottom" Height="60" />
  </StackPanel>
</Page>

```

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [January 27, 2016, 12:25pm UTC](https://forums.fusetools.com/t/layout-with-scrollview/2624/2 "2016-01-27T12:25:07Z")

</div>

Hi!

Inside your page you have a `<StackPanel />`, from reading your code it looks like you want a `<DockPanel />` since you have set `Dock="..."` on the children. And if you change it to `<DockPanel />` I get the layout that you describe when I test this 🙂

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [January 27, 2016, 12:26pm UTC](https://forums.fusetools.com/t/layout-with-scrollview/2624/3 "2016-01-27T12:26:02Z")

</div>

Like this 🙂

```auto
<Page ux:Name="home">
    <DockPanel>
        <Header Dock="Top" Height="60" />
        <ScrollView>
            <StackPanel>
                <Panel ux:Name="panel1" Height="80" Background="#F44336" />
                <Panel Height="200" Background="#ddd"/>
                <Panel Height="200" Background="#bbb"/>
                <Panel Height="200" Background="#999"/>
                <Panel Height="200" Background="#777"/>
                <Panel Height="200" Background="#444"/>
                <Panel ux:Name="panel2" Height="80" Background="#3949AB" />
            </StackPanel>
        </ScrollView>
        <BottomBar Dock="Bottom" Height="60" />
    </DockPanel>
</Page>

```

---

<div class="post-metadata">

**Author:** ![oskar](https://avatars.discourse-cdn.com/v4/letter/o/f07891/32.png) [@oskar](https://forums.fusetools.com/u/oskar)\
**Post date:** [February 9, 2016, 6:50am UTC](https://forums.fusetools.com/t/layout-with-scrollview/2624/4 "2016-02-09T06:50:36Z")

</div>

Worked great! thank you!!