# Images inside of PageControl with FillAspect as BoxSizing inside of ScrollView prevent the ScrollView from fully scrolling

**URL:** https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805
**Category:** Bug Reports
**Created:** [March 14, 2016, 6:18pm UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805 "2016-03-14T18:18:08Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)
#### Post date: [March 14, 2016, 6:18pm UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/1 "2016-03-14T18:18:08Z")

</div>

Using `BoxSizing="FillAspect"` on the images inside the PageControl in the following UX, causes a scrolling problem for the ScrollView (I took off the BoxSizing=“FillAspect” and it works perfectly, so that’s the cause)

Here’s the ux:

```auto
<App Theme="Basic" Background="#DDD">
    <JavaScript File="MainView.js" />
    <DockPanel>
        <ScrollView ux:Name="feed">
            <StackPanel Alignment="TopCenter">
                <Each Items="{feed}">
                    <StackPanel Background="#fff" Margin="15,4">
                        <DropShadow Distance="8" />
                        <Text Alignment="Center" Value="Name" Padding="0,5" FontSize="30" TextAlignment="Center" TextWrapping="Wrap" />
                        <Text Alignment="Center" Padding="0,5" FontSize="20" TextColor="#333" TextAlignment="Center" TextWrapping="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, illo!" />
                        <PageControl ClipToBounds="true" Margin="8">
                            <DropShadow Distance="8" />
                            <Image File="Assets/background1.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="5,0" />
                            <Image File="Assets/background2.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="5,0" />
                            <Image File="Assets/background3.png" BoxSizing="FillAspect" StretchMode="Fill" Margin="5,0" />
                        </PageControl>
                    </StackPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

```

The simple JS:

```auto
var Observable = require("FuseJS/Observable");
var feed = Observable({}, {});
module.exports = { feed: feed }

```

The GIF showing the problem:

---

<div class="post-metadata">

### Author: ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)
#### Post date: [March 17, 2016, 9:00pm UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/2 "2016-03-17T21:00:21Z")

</div>

Editing the post didn’t allow me to upload the GIF ( so here’s a new reply 🙂 )

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/QOtgEZvKI8Bv-legacy-files-QIFtM5wFW6L2ddzN-eb4fBbS0Z2l4V0NwRikcqCMA.gif)

---

<div class="post-metadata">

### Author: ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)
#### Post date: [March 29, 2016, 11:07am UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/3 "2016-03-29T11:07:47Z")

</div>

Hey!

The problem is that you have put Alignment=“TopCenter” on the StackPanel inside the ScrollView

```auto
        <ScrollView ux:Name="feed">
            <StackPanel Alignment="TopCenter">

```

Change it to

```auto
        <ScrollView ux:Name="feed">
            <StackPanel>

```

and it works as expected 🙂 Sorry about the late reply

---

<div class="post-metadata">

### Author: ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)
#### Post date: [March 29, 2016, 11:17am UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/4 "2016-03-29T11:17:20Z")

</div>

Thanks for the reply.

I’ve changed a lot of code around, and I took off `<ColumnLayout />` for `<StackPanel Alignment="TopCenter">` in the above example. Which I actually had, forgot to put that, but now that seems to also work as well.

I’ll check that out.

Thanks for the fix, but is there a reason that `Alignment="TopCenter"` can’t be used? Why does that affect the `ScrollView`?

---

<div class="post-metadata">

### Author: ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)
#### Post date: [April 11, 2016, 9:10am UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/5 "2016-04-11T09:10:52Z")

</div>

You probably wanted just `Alignment="Top"` instead of `TopCenter`, but otherwise it should have worked. I’ve recently done some work in this area though, so it’s possible there was a defect in the older versions that prevented it from working correctly. There are several use-cases where aligning things within a `ScorllView` makes sense, so we do want to support that.

---

<div class="post-metadata">

### Author: ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)
#### Post date: [April 11, 2016, 9:38am UTC](https://forums.fusetools.com/t/images-inside-of-pagecontrol-with-fillaspect-as-boxsizing-inside-of-scrollview-prevent-the-scrollview-from-fully-scrolling/5805/6 "2016-04-11T09:38:53Z")

</div>

I had it as `TopCenter` because I was doing some responsive work, with `ColumnLayout` which if you only had it at `Top` it’d align somewhat to the left, `TopCenter` did what I want, but then the problem I’m describing occured when I had `StackLayout`
