ScrollView doesn't work properly on Android.

[Dan-Banfield]

Description

When I wrap a ScrollView around a VerticalStackLayout in Android specifically, or any other control really, if the controls exceed the viewing area, it's not possible to scroll, and everything is simply truncated. https://i.imgur.com/fwfnTfi.png This same project works completely fine on Windows, though, and scrolling works perfectly. Here is the xaml:

<ScrollView>
        <VerticalStackLayout 
            Spacing="16" 
            Padding="30,30" 
            VerticalOptions="Start">

            <Label
                x:Name="titleLabel"
                FontSize="32"
                FontFamily=""
                FontAttributes="Bold"
                Text="Loading..." />

            <Label
                x:Name="descriptionLabel"
                FontSize="18"
                FontFamily=""
                FontAttributes="None"
                Text="Loading..." />

            <Image
                x:Name="apodImage"
                Margin="0, 30"
                Source="loading.png"
                HeightRequest="200"
                Aspect="AspectFit" />

            <Button
                x:Name="refreshButton"
                IsEnabled="False"
                Text="Refresh" 
                Clicked="refreshButton_Clicked" />

            <Button
                x:Name="shareButton"
                IsEnabled="False"
                Text="Share" 
                Clicked="shareButton_Clicked" />

        </VerticalStackLayout>
    </ScrollView>

Thanks for your time!

(Top part of the code which keeps getting cut off):

Steps to Reproduce

1. Create a new .NET MAUI project.
2. In the default VerticalStackLayout, add some controls and then change their initial size at runtime.
3. Run the project on Android.

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All Android versions

Did you find any workaround?

edit see: https://github.com/dotnet/maui/issues/7590#issuecomment-1164968260

Relevant log output

No response

[leoderja]

the code you posted, is incomplete and do not produces the image that you shared...

[Dan-Banfield]

the code you posted, is incomplete and do not produces the image that you shared...

Hi, sorry, the top part of the code is as follows (it keeps getting cut off when posted): And as for the title label and description label, I'm simply setting their text to that of the APOD feature from the NASA API. In doing so, the ScrollView cuts off, not enabling scrolling, and the buttons and other controls get hidden. In other words, when the second label has lots of text, it cuts off the ScrollView. The ScrollView also can't scroll.

[fsdsabel]

I think it's a problem with updating the size of controls inside of a ScrollView after initial layout. I just wanted to open an issue myself. I can easily reproduce it like so:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:html="http://schemas.microsoft.com/dotnet/2021/mauilitehtml"   
              xmlns:local="clr-namespace:LiteHtmlMaui.TestApp"
             x:Class="Maui.TestApp.DynamicPage">
    <ContentPage.Content>
        <ScrollView VerticalScrollBarVisibility="Always">
            <StackLayout>
                <BoxView HeightRequest="100" x:Name="bd"></BoxView>
                <Button Text="Click" Clicked="Button_Clicked"></Button>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

code behind:

public partial class DynamicPage : ContentPage
{
    public DynamicPage()
    {
        InitializeComponent();    
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        bd.HeightRequest = 10000;
    }
}

After clicking the button the button is gone and no scrolling is possible. This happens on Android and iOS but is fine on Windows.

[Dan-Banfield]

I think it's a problem with updating the size of controls inside of a ScrollView after initial layout. I just wanted to open an issue myself. I can easily reproduce it like so:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:html="http://schemas.microsoft.com/dotnet/2021/mauilitehtml"   
              xmlns:local="clr-namespace:LiteHtmlMaui.TestApp"
             x:Class="Maui.TestApp.DynamicPage">
    <ContentPage.Content>
        <ScrollView VerticalScrollBarVisibility="Always">
            <StackLayout>
                <BoxView HeightRequest="100" x:Name="bd"></BoxView>
                <Button Text="Click" Clicked="Button_Clicked"></Button>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

code behind:

public partial class DynamicPage : ContentPage
{
  public DynamicPage()
  {
      InitializeComponent();    
  }

    private void Button_Clicked(object sender, EventArgs e)
    {
        bd.HeightRequest = 10000;
    }
}

After clicking the button the button is gone and no scrolling is possible. This happens on Android and iOS but is fine on Windows.

Thanks for also bringing this up!

[paulvarache]

This might be related to this issue I flagged a few days ago https://github.com/dotnet/maui/issues/7322 This issue specifically mentions using IsVisible, but if related to the content sizing not updating it might be the same bug

[Dan-Banfield]

This might be related to this issue I flagged a few days ago #7322 This issue specifically mentions using IsVisible, but if related to the content sizing not updating it might be the same bug

Yeah, I think it's anything related to resizing which causes the ScrollView to break because it works fine initially but I update the data with some fetched from an API, and it overflows and breaks.

[angelru]

if you use a Grid does the same thing happen?

[Dan-Banfield]

if you use a Grid does the same thing happen?

Haven't tried a Grid yet, but from what I understand, it's any control inside of a ScrollView that's size gets changed from its initial value.

[fsdsabel]

Tried it with Grid:

<Grid RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand">         
                <Frame x:Name="html"  HeightRequest="1000" BackgroundColor="Red"/>
                <Button Grid.Row="1" Clicked="Button_Clicked"></Button>
            </Grid>

Makes no difference on Android but is even more broken on Windows. On Windows it doesn't even render correctly initially.

[XamerDev]

same here, scrolling doesnt work when we have verticalstacklayout inside scrollView. On android doesnt work at all, on Windows works ok. One thing when I populate data during initialization in constructor scrolling works properly so it seems that the problems is in "resizing" layout after initialization

[Dan-Banfield]

same here, scrolling doesnt work when we have verticalstacklayout inside scrollView. On android doesnt work at all, on Windows works ok. One thing when I populate data during initialization in constructor scrolling works properly so it seems that the problems is in "resizing" layout after initialization

Yup. Exactly the same here. A really big problem actually; I don't even know how this went unnoticed?

[CobaltGoldCS]

There are a ton of issues relating to the resizing of scrollView that I have been able to find, and all of them seem to have something to do with resizes.

6959 #7322

[VincentBu]

repro with vs main build 32601.361.main on Android emulator & IOS emulator

[Quietscheente]

Also massive scrolling problems on Android. What always worked for me as a workaround to not get stuck in project development is hold phone landscape and back again.

[jameskolts]

Have this issue as well

[philipag]

same issue here

[fyndor]

This is my workaround for now. Every time I do something in my ViewModel that I know should affect the vertical height of the page, I call an Action that I assign to this method. By setting the Content property to null, and then back to it's value as defined in XAML, it recalculates it's size and works properly.

private void NotifyScrollChanged()
{
    var content = ScrollViewCtrl.Content;
    ScrollViewCtrl.Content = null;
    ScrollViewCtrl.Content = content;
}

[Dreamescaper]

It's probably the same issue which was fixed in XF some time ago https://github.com/xamarin/Xamarin.Forms/issues/14569

[leoderja]

This is my workaround for now. Every time I do something in my ViewModel that I know should affect the vertical height of the page, I call an Action that I assign to this method. By setting the Content property to null, and then back to it's value as defined in XAML, it recalculates it's size and works properly.

private void NotifyScrollChanged()
{
    var content = ScrollViewCtrl.Content;
    ScrollViewCtrl.Content = null;
    ScrollViewCtrl.Content = content;
}

Thank you, Greg!... your solution magically came to me at the right time...

[jfversluis]

Checked on the latest code, this seems to work there. The fix should be included in the next service release!