[Bug] Android - ScrollView truncates items when using StackLayout BindableLayout

[DatBear]

Description

StackLayout with BindableLayout items inside a ScrollView causes the ScrollView to truncate the items near the bottom.

Steps to Reproduce

On Android

1. Nest a StackLayout with BindableLayout.ItemsSource set, and a BindableLayout.ItemTemplate set.
2. Add an item to a source collection that is represented by the StackLayout's BindableLayout.ItemsSource.

Expected Behavior

Scrollview will update viewable size to show all items when scrolling down.

Actual Behavior

Scrollview truncates items at the bottom of the scrollview.

Basic Information

• Version with issue: Xamarin.Forms 5.0.0.1931
• Last known good version: Only tested with 4.6.0.1180 but has probably worked past that, not verified though.
• Platform Target Frameworks:
  • Android: 10.0
• Android Support Library / AndroidX Version:
• NuGet Packages:
• Affected Devices:
• Android - tested on Pixel 2 simulator, Pixel 3 simulator, and physical Pixel 2

Screenshots

Before adding an item to the BindableLayout.ItemsSource collection:

After adding an item to the StackLayout BindableLayout.ItemsSource collection:

Reproduction Link

https://github.com/DatBear/ScrollViewBug

Workaround

Edit: Wrapping the ScrollView in a ContentView seems to be a good workaround.

[rachelkang]

Hi, @DatBear - thanks for submitting this issue! I'm able to reproduce it and the behavior is certainly strange - as you mentioned, the bottom views seem to disappear when tapping the "Add Data" button to add data. This occurs on Android, whereas this is not an issue on iOS. This also appears to be a regression, as it works fine on XF 4.8

[perphilipp]

I also stumbled upon this bug, the setup is exactly the same.
A StackLayout that dynamically changes height through a binding within another StackLayout enclosed by a ScrollView.
Everything words fine untill Xamarin.Forms 5.0.0.1874.
The outer StackLayout has the VerticalOptions="StartAndExpand". Then, the content of the outer StackLayout already gets cut off before it reaches the end of the ScrollView.
Unfortunately the bug blocks further updates of our app.

[keanfatt]

This problem isn't limited to StackLayout, this occurs in Grid as well. As long as items are added and goes out of screen. All items in the ScrollView that are out of screen are truncated. Change the orientation of the emulated/physical Android device and the truncated items will appear.

[mitkins]

Same thing happens to me too, except I don't have BindableLayout.ItemsSource set on the parent StackLayout (however, there are sub-controls that do use bindings).

This only happens if the contents goes beyond the end of the screen. I tried using a FlexLayout and same thing happened.

[cnp5]

Was trying to make sense of the issue and tested all 5.0.0 versions (including prereleases),
It was working on version 5.0.0 Pre Release 1 and stopped working from 5.0.0 Pre Release 2 and after.

In my project, I use StackLayout with BindableLayout.ItemsSource, changing orientation renders all items correctly.

output1.mp4

Reproduction project

[gdang]

In my project, I use StackLayout with BindableLayout.ItemsSource, changing orientation renders all items correctly.

Same here... Wrapping the ScrollView with a ContentView fixes the issue in my case.

[ish-1313]

Hit the same .. few stacklayots (as sections) within scrollview. some stacklayouts hidden on start and then may be shown depending on radio button states (through binded properties). items at the end got partially hidden. however. the scrollview sizing seems to be good. working good in latest 4.8

wrapping in contenview solved this

<ScrollView Padding="{StaticResource PageMargins}" BackgroundColor="LightSalmon">

<!-- more code here -->

                <Button Text="{x:Static res:AppResources.BBB_SAVE}" Style="{StaticResource ListButtonStyle}"
                        Command="{Binding cmdSavePet}" CommandParameter="{Binding ., Source={x:Reference thisPage}}" />

                <Grid RowDefinitions="Auto,400, Auto"  >
                        <Label Text="start" />
                        <Frame Grid.Row="1"  BackgroundColor="Red"/>
                        <Label Grid.Row="2" Text="finish" />
                </Grid>

            </StackLayout>
        </ScrollView>

[wutever0]

Thank you for the work arounds. Any chance we can have this looked at sometime soon?

[stesvis]

Hit the same .. few stacklayots (as sections) within scrollview. some stacklayouts hidden on start and then may be shown depending on radio button states (through binded properties). items at the end got partially hidden. however. the scrollview sizing seems to be good. working good in latest 4.8

wrapping in contenview solved this

<ScrollView Padding="{StaticResource PageMargins}" BackgroundColor="LightSalmon">

<!-- more code here -->

                <Button Text="{x:Static res:AppResources.BBB_SAVE}" Style="{StaticResource ListButtonStyle}"
                        Command="{Binding cmdSavePet}" CommandParameter="{Binding ., Source={x:Reference thisPage}}" />

                <Grid RowDefinitions="Auto,400, Auto"  >
                        <Label Text="start" />
                        <Frame Grid.Row="1"  BackgroundColor="Red"/>
                        <Label Grid.Row="2" Text="finish" />
                </Grid>

            </StackLayout>
        </ScrollView>

I am still having this same issue in June 2021...thanks for the workaround!
Hoping it will be fixed tho!

[FabriBertani]

@PureWeen Any news on this, maybe? The workaround it's good, but I think we need an XF solution to this, to avoid adding more complexity to our views. Also, ContentView it's preferred for reusable elements.

@jsuarezruiz maybe you can take a look to this too ?

[tchakma01]

Having Save issue. Any further updates? Hoping it will be fixed in the next xamarin Form update.

[weinamdev]

Same thing happen here, spent nearly half day to figure out what was the problem (thought was my own mistake) before seeing this post.
Additional information found for developers: if the item in IEnumerable for BindableLayout.ItemsSource is simple data type like string, this problem (scrollview truncates StackLayout items on page) doesn't happen, this issue happens only when the item in IEnumerable is a class object, which mainly the purpose of what BindableLayout.ItemsSource is often used for.

[v4leria]

Same thing happening to me, It would be great if we could get an estimate or an update. This issue is preventing us from releasing our product for Android.

[phamkimtho]

I used ContentView (it contain StackLayout). It worked for me.

[uzairali001]

I've spent couple of hours to figure out why scroll view is truncating data found no logical issue in my code then decided to google it and here I am, so it's been more than 6 month since this issue is reported here I'm surprised it's not resolve yet.
Does suggested workaround has any negative impact other than performance?

[skadookkunnan]

Any update on this issue? this is happening to us as well.

[tchakma01]

Any update on this issue? this is happening to us as well.

I found this happens when you use scroll view control directly inside ContentPage.Content
Example : <ContentPage.Content> <ContentPage.Content>

The solution is to wrap the scroll view with a stack layout.

Example : <ContentPage.Content> <ContentPage.Content>

[skadookkunnan]

Any update on this issue? this is happening to us as well.

I found this happens when you use scroll view control directly inside ContentPage.Content
Example : <ContentPage.Content> <ContentPage.Content>

The solution is to wrap the scroll view with a stack layout.

Example : <ContentPage.Content> <ContentPage.Content>

I have used @phamkimtho's solution and that seems to work for now, on the latest XF 5 (5.0.0.2083).

Still not digesting the issue. 👎

[puhtahtoe]

I recently had this problem too when adding controls to a StackLayout inside a ScrollView programmatically, no binding. Triggering what I assume to be some kind of screen redraw (interacting with a text box, taking screenshot) would reveal the truncated content. I spent hours fiddling with different options until someone directed me to this issue and the workaround @gdang suggested which "fixed" it immediately.

[c0ff33-b34n]

Having the same issue when using a stack layout inside a scroll view on Android. If the content inside the stack layout expands, e.g. when an error message is added below and entry field, the content at the bottom of the scroll view is truncated.
Placing the scroll view inside a stack layout seemed to fix it. Seems bizarre to have to do this, but that solution works for now.

[michelmoorlag]

My fix for this issue is binding the Scrolleview Orientation property to a ScrollOrientation type property and force to read it by calling OnPropertyChanged with the property name when you need the scollview to recaculate it's height. Make sure you set the orientation to a different value that it's current value or it will not work. You can do this by toggeling between ScrollOrientation.Both and ScrollOrientation.Vertical for example.

[jfversluis]

@michelmoorlag that seems more like a workaround than a fix :D but thank you for this! This might also give some kind of hint on how to fix this.

[holecekp]

Maybe it is connected to the bug #14918, or #14398. ScrollView has very bad issues in situation when the height of its content is changed on Android (lazy loaded views, or when some previously invisible view becomes visible). I will try if your ContentView workaround works also for these bugs.

Edited: I have test it and the ContentView workaround works also for the two other mentioned bugs. So maybe they are caused by the same issue.

Many thanks for this workaround.

[jfversluis]

Hey all if you are still with us, a PR (#15067) for this is open now that potentially fixes this, would you be able to grab the NuGet as described here and let us know if this fixes this issue? That will greatly speed up the review process.

Besides verifying if this particular issue is fixed also be sure to check other scenarios in the same area to make sure that this fix doesn't accidentally has side-effects 🙂

Thanks!

[cnp5]

Hey all if you are still with us, a PR (#15067) for this is open now that potentially fixes this, would you be able to grab the NuGet as described here and let us know if this fixes this issue? That will greatly speed up the review process.

Besides verifying if this particular issue is fixed also be sure to check other scenarios in the same area to make sure that this fix doesn't accidentally has side-effects 🙂

Thanks!

Just tried version 5.0.0.7396 but it did not solve the issue :(
but I also tried version 5.0.0.7996 and this version solved the problem... I will try to find the exact version that fixed the functionality in my test project

[heikow10]

Hey @cnp5! Could you test it with the build 5.0.0.7996? This is the right one for the PR #15067.

[cnp5]

Hey @cnp5! Could you test it with the build 5.0.0.7996? This is the right one for the PR #15067.

just did and it works (I will try to find the first version that it started working again)

[cnp5]

I missunderstood :), thought that version 5.0.0.7396 would solve the issue, but you are right @heikow10, it is version 5.0.0.7996 that fixes the problem, and it seems that it is working as expected :)

[heikow10]

Ok. Thanks for the information and your tests, @cn5!

[jfversluis]

For testing these PR fixes you should use a very specific version indeed :) glad we could figure it out and thanks for the help on this!

[julioroldan]

The Solution was:

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView>
MY CODE
</ScrollView>
</StackLayout>

[jfversluis]

This should be fixed by #15076 and part of SR10

[tompi]

Thank you @julioroldan Your fixed worked fine for me. Should you close bugs before fix is released @jfversluis ? (Im on 5.0.0.2337 latest official version, and it still has this bug)

[michelmoorlag]

@michelmoorlag that seems more like a workaround than a fix :D but thank you for this! This might also give some kind of hint on how to fix this.

@jfversluis Fix is indeed not the correct term here, it is indeed a work around. When will SR10 be released?

[jfversluis]

Should you close bugs before fix is released @jfversluis ?

Yes, it's closed whenever a fix is merged pending release.

SR10 should be here soon

[michelmoorlag]

I can confirm that installing XF 5.0.0.2401 fixed it for me.

[jfversluis]

Perfect, thanks for letting us know @michelmoorlag !

[davidbuckleyni]

Hi @jfversluis I seem to be suffering the same effect however my issue is am using DevExpress Popup Control and Xamarin Forms Lattest on Android.

Please see video of issue

https://screenrec.com/share/rcL4RbwBnK
Purple is my scroll view
Orange is my stack layout where my controlls live
Red is my frame

I cant tell what is going wrong here.