Endless Scolling (Not Expected Behavior)

Bug Reports
1

I could very well just be doing this wrong, but here is what I have.

Fuse version 0.10.0 (build 6044)
Uno version 0.25.10-OSX (build 1633)
Same result on Local and Android Preview


<ScrollView>
    <StackPanel>
        <Each Items="{products}">
            <MyProducts ImageUrl="{imageUrl}" Title="{title}" Price="{price}" />
        </Each>
    </StackPanel>
</ScrollView>

Now I’d expect that after the products are all rendered out, the end of the ScrollView would end with the content. However, the result is that I can scroll past the content and continue scrolling endlessly.

In case it isn’t clear, X's are screens with content and O's are screens without content (4 screens with content).

X
X
X
X
O
O
O
O
O
O
O
O
O
O
O
O
O
and you could keep scrolling

Hope this makes sense. I can provide more info if needed.

2

You either want no <ScrollView> and just:

 <StackPanel>
    <Each Items="{products}">
        <MyProducts ImageUrl="{imageUrl}" Title="{title}" Price="{price}" />
    </Each>
 </StackPanel>

or:

<ScrollView>
    <Each Items="{products}">
        <StackPanel>
            <MyProducts ImageUrl="{imageUrl}" Title="{title}" Price="{price}" />
        </StackPanel>
    </Each>
</ScrollView>
3

Thanks for the reply Edwin.

However, when I try your first example, I cannot scroll (at least not in local preview).

And when I try your second example, nothing gets rendered at all.

Thoughts?

4

Ok, so it turns out there is a bug here.

In the <MyProducts> class, I have an <Image> and when it does not have a Height attribute, I have the endless scolling issue, when I set the height to say 200 for example, the scolling issue is fixed.

Here is complete version of my code, for reproduction of this issue:

<App Theme="Basic" Background="#eeeeeeff">
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var products = new Observable();

    for (var i = 0; i < 20; i++) {
        var date = Date.now();
        products.add({
            imageUrl   : "http://lorempixel.com/400/200/?v="+i+date,
            title      : i + " title",
            unit       : "0." + i,
            identifier : i + "1075",
            price      : "$" + i + "5,077"
        })
        console.log(i);
    }

    module.exports = {
        products: products
    };
    </JavaScript>
    <DockPanel>
        <iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Light" IsVisible="true"/>
        <Panel>
            <Style>
                <Text FontSize="16" TextWrapping="Wrap" TextColor="#000000" />
            </Style>
            <StackPanel ux:Class="Product" ux:Name="self" ImageUrl="http://lorempixel.com/400/200/&quot; Title="Title Here" Unit="0.5" Identifier="21075" Price="$3,077">
                <string ux:Property="ImageUrl" />
                <string ux:Property="Title" />
                <string ux:Property="Unit" />
                <string ux:Property="Identifier" />
                <string ux:Property="Price" />
                <StackPanel Orientation="Vertical" Width="100%">
                    <Image Url="{Property self.ImageUrl}" StretchMode="UniformToFill" Width="100%" Height="200" />
                    <StackPanel Orientation="Vertical" Width="100%" Background="#FFFFFF" Padding="5">
                        <DockPanel>
                            <Text Dock="Left" Value="{Property self.Title}" />
                            <Text Dock="Right" FontSize="18" Value="{Property self.Unit}" />
                        </DockPanel>
                        <DockPanel>
                            <Text Dock="Left" TextColor="#BB0000" Value="{Property self.Price}" />
                            <Text Dock="Right" FontSize="12" Value="{Property self.Identifier}" />
                        </DockPanel>
                    </StackPanel>
                </StackPanel>
            </StackPanel>

            <ScrollView>
                <StackPanel>
                    <Each Items="{products}">
                        <Product ImageUrl="{imageUrl}" Title="{title}" Unit="{unit}" Identifier="{identifier}" Price="{price}" />
                    </Each>
                </StackPanel>
            </ScrollView>
        </Panel>
        <BottomBarBackground Dock="Bottom" />
    </DockPanel>
</App>

Now if you just remove Height="200" from the <Image> nested in the <StackPanel> of the Product class, you will see endless scrolling. Note: it’s probably not “endless” and more likely just a multiplier of the calculated height of the images (my guess).