Scrollview does not resize when ContentSize changes when inside a Detail page

[mattclarkie]

Description

When the content inside a scrollview changes size the Scrollview does not resize itself. The effect is that when content gets smaller a gap is left where the content used to be, when content gets bigger it cannot be seen. This only happens when the ScrollView is inside a Page that is the Detail of a MasterDetailPage. If the Detail is a NavigationPage then the Scrollview works correctly.

Steps to Reproduce

1. Create a MasterDetailPage
2. Assign a Page to the Detail (not a NavigationPage)
3. Add a Scrollview to the Page
4. Add a StackLayout to the Scrollview
5. Add 2 or more Layouts to the StackLayout with some content
6. Trigger one of the Layouts to change size, for example set it's content to IsVisible=false

In the reproduction solution mdp.xaml.cs in the PCL is the page that set the Detail, on initial load there will be a NavigationPage. To reproduce in the Reproduction

1. Run the Reproduction
2. Hit top Expand/Collapse and the red box will disappear/appear and the layout will adjust correctly
3. Choose Page 1 in the navigator
4. Repeat with the top Expand/Collapse the red box will disappear/appear but the layout will not adjust

Note, I can't remember whether the uploaded reproduction is referencing the Xamarin.Forms version that works or the one that doesn't work. Please ensure that the Xamarin.Forms references are set to 2.4.0.91020 or later.

Expected Behavior

Layout is adjusted/redrawn so controls occupy the ScrollView without leaving empty space.

Actual Behavior

Empty space is left where the (now) smaller control used to occupy. The Draw method in the ScrollViewRenderer never gets called, although the ContentSizeProperty does trigger a PropertyChanged event.

Basic Information

• Version with issue:2.4.0.91020 onwards
• Last known good version:2.3.4.270
• IDE:Visual Studio 2015 and 2017.3
• Platform Target Frameworks:
  • Android:5.1.1, presumably other versions too
• Android Support Library Version: 25.4.0.2
• Nuget Packages:Xamarin.Forms
• Affected Devices:

Reproduction Link

AndroidScrollviewIssue.zip

[shipjacker]

Hi, I think that this bug is related to 60453 and 60399 on Bugzilla. Its confirmed on 2.5.0 sr2.

I'm having the same problem, some components missing, different behavior in different Android APIs, and so on. I think that the problem is related to the HorizontalOptions of controls inside a Page.Content when this Content is a ScrollView. As commented on 60453, I fixed my solution with this workaround, as described below:

"
...

Upon further analysis, I think that the problem has something involved with the HorizontalOptions of the ScrollView inside a MasterDetailPage. In my tests, I have a MasterDetailPage and my Detail page has a ScrollView setted as the Content of the page, with some StackLayouts inside, besides another components (Labels, Images, etc).

If we redefine the HorizontalOptions from the Page.Content (to any value) and the HorizontalOptions from the ScrollView (to anything diferent from Fill / FillAndExpand, like CenterAndExpand), the content will appear correctly in any API version that I have tested.

But there is a implication with this workaround, I think that when we add some components inside the Content of the ScrollView or inside the Content of any of its children (like StackLayouts), the widths of them all may be recalculated and the bug comes back (hiding some controls), so its important that you define these HorizontalOptions AFTER you add any components that you need.

In my case, I have a ScrollView and in my constructor I set it as the Content of the Detail page. After that, terminating another method where I add some more controls inside the ScrollView, I have to redefine both the HorizontalOptions:

myScrollView.HorizontalOptions = LayoutOptions.CenterAndExpand;
this.Content.HorizontalOptions = LayoutOptions.FillAndExpand;

Doing this, all controls visibility works as expected in any API version.

Hope that it can help!"

One more thing, when we do a page rotation on any device, the components reappear.

*** Note that the behavior of this bug on Android 4.3 or less is worse than 4.4 and up;

[mattclarkie]

@shipjacker
It does look a very similar issue and it's good the workaround works for you, unfortunately for me it didn't work 😭

[leo-mck]

I only observed this on my app on android < 4.4 - but it is still a blocker and got me stuck on 2.3.4.

[Kukkimonsuta]

These are most likely the same issue:

https://bugzilla.xamarin.com/show_bug.cgi?id=60155
https://bugzilla.xamarin.com/show_bug.cgi?id=60436

[shipjacker]

@Kukkimonsuta

Agreed! Updating the list:

https://bugzilla.xamarin.com/show_bug.cgi?id=60155
https://bugzilla.xamarin.com/show_bug.cgi?id=60399
https://bugzilla.xamarin.com/show_bug.cgi?id=60436
https://bugzilla.xamarin.com/show_bug.cgi?id=60453

[xprofession]

Any news?

[reense]

+1

[berlamont]

+1

[cub-bsi]

We’re also facing this issue in our project. Would be great if this could be fixed within the next few weeks.

[andreinitescu]

Everyone should mention the Android platform where this issue can be observed. If possible, maybe also test on different Android versions. Anything which can help debugging the issue.

[zeljkoa]

I can confirm the issue on Android 4.1 and 4.2. We've been stuck with Forms 2.3.x for quite a while now. Is there a planned release date for the fix?

[xprofession]

I ended up using FlowListView, and put all my view in one cell. Works fine, but not so convinient. Now I going to use something like this again.

[Kukkimonsuta]

We've been forced to drop android <4.4 support due to this, thankfully most users already migrated to newer versions. It is a bit disappointing that this issue is still not resolved as this is something that makes affected apps completely unusable on these devices.

[dmachlanski]

It's still an issue for us, regardless of Android version used (even on Oreo).

[AtlasAF01]

This is a big problem for us as it is cutting off the controls/views at the bottom of our pages. We utilize Master/Detail with absolute layouts wrapping scroll views.

Tried various android versions on different devices and emulators with no change. Appeared when we updated to 2.5.1.444934 from 2.4

[stackhaufen]

There is a "workaround" (more like an awful hack):

Open the keyboard for more than 100ms und close it again, this forces the GUI to refresh and "fixes" most problems on most Android versions.

[mattclarkie]

Given how this is severe and breaks existing behaviour I'm surprised
a) It's not scheduled for fix on v2 maintenance
b) It's not actually scheduled for vNext but for vNext+1

How is this going to be broken for @jassmith?

[maikoly1]

Fixed this by Calling InitializeComponent() method on "Appearing override Method".

[irshadka]

Any fixes for this issue?

[samhouts]

This issue doesn't seem to have had any activity in a long time. We're working on prioritizing issues and resolving them as quickly as we can. To help us get through the list, we would appreciate an update from you to let us know if this is still affecting you on the latest version of Xamarin.Forms, since it's possible that we may have resolved this as part of another related or duplicate issue. If we don't see any new activity on this issue in the next 30 days, we'll evaluate whether this issue should be closed. Thank you!

[Redth]

Since we haven't heard from you in more than 30 days, we hope this issue is no longer affecting you. If it is, please reopen this issue and provide the requested information so that we can look into it further. Thank you!

[danielmeza]

I had this issue on v 5, after I upgrade from 4 to 5.

[ianthetechie]

@samhouts this is still an issue. Happens consistently on Android only.

[BlueRaja]

Yep, this issue still exists. This bug should not have been closed.

[Edit] There's a workaround here.

[momodu]

Wrapping the ScrollView with a ContentView FIXES the issue in my case.

An example is something like this:

    <ContentPage.Content>
        <ContentView>
            <ScrollView BackgroundColor="WhiteSmoke">
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="10,10,10,10">
                 ...... ANYTHING GOES HERE
                 </StackLayout>
              </ScrollView>
           </ContentView>
      </ContentPage.Content>

Hope this helps

[sarapura12]

Wrapping the ScrollView with a ContentView FIXES the issue in my case.

An example is something like this:

    <ContentPage.Content>
        <ContentView>
            <ScrollView BackgroundColor="WhiteSmoke">
                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="10,10,10,10">
                 ...... ANYTHING GOES HERE
                 </StackLayout>
              </ScrollView>
           </ContentView>
      </ContentPage.Content>

Hope this helps

thanks