maui: ScrollView doesn't work properly on Android.

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

Create a new .NET MAUI project.
In the default VerticalStackLayout, add some controls and then change their initial size at runtime.
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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 20 (1 by maintainers)

Most upvoted comments

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;
}

fyndor on Jun 23, 2022

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?

Dan-Banfield on May 31, 2022

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.

fsdsabel on May 31, 2022

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

jfversluis on Jul 6, 2022

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.

Quietscheente on Jun 6, 2022

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

VincentBu on Jun 2, 2022

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.

Dan-Banfield on May 31, 2022

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.

Dan-Banfield on May 29, 2022