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

Bug Reports
1

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:

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

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

The GIF showing the problem:

2

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

file
QOtgEZvKI8Bv-legacy-files-QIFtM5wFW6L2ddzN-eb4fBbS0Z2l4V0NwRikcqCMA.gif375×603

3

Hey!

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

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

Change it to

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

and it works as expected :slight_smile: Sorry about the late reply

4

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?

5

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.

6

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