[iOS] ListView Group Header size incorrect on iOS

[adammeaney]

Description

When using a grouped ListView with a custom header template, Android and UWP expand the header size.

iOS has a set height to the cell, and then overflows to write over the children cells

Steps to Reproduce

Run the supplied project on iOS. See it look like trash.

Expected Behavior

Headers resize

Actual Behavior

They do not.

Basic Information

Ran on iOS simulator and a real device on iOS 11.3 and 11.4.

• Version with issue: Forms 3.2.0
  Never seen it work, been around since 1.3

Screenshots

iOS:

UWP:

Reproduction Link

ListViewHeaderRpo.zip

[skiarn]

what happend to this issue?

[nbevans]

This is surely a priority 1 issue?

[adammeaney]

For anyone who cares, this issue still happens as of Forms 3.6 latest at this time.

I just updated this morning to check.

[nbevans]

There are historical threads on the old Xamarin Forums dating back to 2014 discussing this issue. It's also on the Bugzilla in various issues. We are now in 2019 and still XF on iOS cannot properly adjust for height of a ListView Header. Let that sink in for a minute... ;-)

I've looked at the relevant bits of source code in XF and it actually looks quite trivial to fix. Basically, it isn't using the AutomaticDimension that iOS has supported for a while now. Which is odd because XF did implement support for this on regular rows... go figure.

In the next day or two I am going to have a go at making a custom renderer to fix it.

[nbevans]

	internal class HeaderWrapperView : UIView
	{
		public Cell Cell { get; set; }
		public override void LayoutSubviews()
		{
			base.LayoutSubviews();
			foreach (var item in Subviews)
				item.Frame = Bounds;
		}
	}

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.iOS/Renderers/ListViewRenderer.cs#L1431

This wrapper view that wraps all section headers is the root cause of the problem. The way it is laying out the subviews like that is quite bizarre and will certainly be screwing up iOS' AutoLayout mechanism which is needed to support AutomaticDimension.

[nbevans]

I've got a fix, both in the form of a Renderer hackfix but also as a proposed patch to XamForms.

The proposed patch is:

Change the HeaderWrapperView class as follows:

            internal class HeaderWrapperView : UIView {
                public Cell Cell { get; private set; }
                public UIView Subview { get; private set; }

                public HeaderWrapperView(Cell cell, UIView subview) {
                    Cell = cell;
                    Subview = subview;
                    AddSubview(subview);
                }

                public override CGSize SizeThatFits(CGSize size) {
                    return Subview.SizeThatFits(size);
                }

                public override CGSize IntrinsicContentSize => Subview.IntrinsicContentSize;

                public override void LayoutSubviews() {
                    base.LayoutSubviews();
                    Subview.Frame = Bounds;
                }
            }

Change the GetViewForHeader method as follows:

// remove the following 2 lines:
-    view = new HeaderWrapperView { Cell = cell };
-    view.AddSubview(renderer.GetCell(cell, null, tableView));

// replace with this line:
+    view = new HeaderWrapperView(cell, renderer.GetCell(cell, null, tableView));

[nbevans]

And here is my renderer hackfix for those that need an immediate solution to use whilst they wait for the above patch to be incorporated in a new release of XF: https://gist.github.com/nbevans/a713dc9c77a8f530b6f4f3cd4fad83c2

[nbevans]

@samhouts @PureWeen Can we reprioritise this issue now and try to get it fixed in the vNext and all the service releases as well?

[nbevans]

@samhouts ? That new inactive tag really seems effective! ;-)

[nbevans]

Will my fix ever get merged in?

[skiarn]

Im waiting for this fix to be merged, @samhouts when can we expect this fix to be merged? thanks and keep up the good work both of you :)

[samhouts]

@nbevans Would you care to submit a pull request? Thanks!

[petrk-ra]

Has this been fixed in Xamarin Forms? If so, which version?

[jfversluis]

@nbevans I’ve incorporated your fix here: https://github.com/xamarin/Xamarin.Forms/blob/fix-3769/Xamarin.Forms.Platform.iOS/Renderers/ListViewRenderer.cs

The only thing I’m worried about is the backwards compatibility. Before this, the header would have a certain height. People might depend on that now. With this fix the height, when not setting the height explicitly, will suddenly be determined automatically.

[leeanpeng]

Would like to know what will be the version with this fix

[nbevans]

@nbevans I’ve incorporated your fix here: https://github.com/xamarin/Xamarin.Forms/blob/fix-3769/Xamarin.Forms.Platform.iOS/Renderers/ListViewRenderer.cs

The only thing I’m worried about is the backwards compatibility. Before this, the header would have a certain height. People might depend on that now. With this fix the height, when not setting the height explicitly, will suddenly be determined automatically.

That's great. As far as the backcompat is concerned we could introduce a property to enable/disable the automatic height mode (and default it to disabled to maintain compat)

When can this be merged into the mainline @samhouts ?

[mzhukovs]

Yes this is quite a pain, hoping soon!!

[thomasgalliker]

Do we know in which Xamarin.Forms version this bug will be fixed? It's quite painful.

[kavitap810]

I just upgraded to XF ver. 4.7 but this issue is still there.
Also, renderer given by @nbevans was working absolutely fine with XF 4.5 but after upgrading to XF 4.7 it is throwing an exception - "Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: UITableViewHeaderFooterView's contentView must remain a direct subview of it. Unexpected superview of the contentView"

Anyone else facing a similar issue? and Do we know in which Xamarin. Forms version this bug will be fixed?

[nbevans]

@samhouts @jamesmontemagno Pretty please can this fix be sorted out?

[SandipAhluwalia]

I just upgraded to XF ver. 4.7 but this issue is still there.
Also, renderer given by @nbevans was working absolutely fine with XF 4.5 but after upgrading to XF 4.7 it is throwing an exception - "Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: UITableViewHeaderFooterView's contentView must remain a direct subview of it. Unexpected superview of the contentView"

Anyone else facing a similar issue? and Do we know in which Xamarin. Forms version this bug will be fixed?

I am now seeing this exception when I upgraded to Xamarin.Forms 4.8 the other day. Does anyone have a workaround to the renderer given by @nbevans to solve this new issue?

[nbevans]

I think my fix was broken when they made this commit: ff74a81#diff-198607f4ce97efcc515a271473524b08

My fix needs some tweaks to make it work with this change.

[SandipAhluwalia]

I think my fix was broken when they made this commit: ff74a81#diff-198607f4ce97efcc515a271473524b08

My fix needs some tweaks to make it work with this change.

Thanks @nbevans So I replaced the following 2 lines in your renderer hackfix

var newWrapper = new HeaderWrapperView(cell, cellView);
return newWrapper;

with

var renderer = (CellRenderer)Xamarin.Forms.Internals.Registrar.Registered.GetHandlerForObject<IRegisterable>(cell);
var view = new HeaderWrapperView(cell, renderer.GetCell(cell, null, tableView));

And now it seems to work okay without the crash.

[nbevans]

That looks like a good stop-gap fix. It would really ideal if Xamarin Forms team just included my fix in the core codebase.

It looks like they're now eyeing v5.0 to include this fix but that is a shame since my understanding is that v5.0 is the MAUI release - so does that mean Xamarin Forms will never actually get this fix before it enters the 2 year maintenance-only period?

[Codelisk]

Important fix for me too

[Codelisk]

For all guys out there who want to make the groupheader invisible, you have to set the ViewCell Height on iOS to 0.0001 or something like that but not zero

[allschu]

@samhouts not anymore?

[allschu]

a definitive fix is really needed!

[giuseppenovielli]

Please fix It!! @samhouts @jsuarezruiz @PureWeen @hartez can you prioritize it??

There isn't either a workaround!!!! :(

[kosozhihin]

It feels great to still experience this bug unfixed in 2021. Feels like being part of something historical.

[nbevans]

Could be worse. We could be stuck on the Flutter framework and pulling our hair out because word-wrap doesn't work properly and making ourselves unemployable because nothing else uses the esoteric Dart language.

[xleon]

I'm in a funny situation:

• I was migrating my CollectionView to ListView due to CollectionView horrible performance in iOS
• ListView group headers are overlapping list items in iOS and doing other funny things.
• I find out this issue on Github
• I was considering switching my job to something different than code  🤨
• Then I found @nbevans fix: https://gist.github.com/nbevans/a713dc9c77a8f530b6f4f3cd4fad83c2
• Happiness

[xleon]

The hack actually crash the app sometimes when ListView has no headers

[rdeveen]

The @nbevans fix has a little bug with the latest XF version. See this: https://gist.github.com/nbevans/a713dc9c77a8f530b6f4f3cd4fad83c2#gistcomment-3471173

@jfversluis Can the fix you created for this get a little bit of love? 🥰

[jfversluis]

The @nbevans fix has a little bug with the latest XF version. See this: https://gist.github.com/nbevans/a713dc9c77a8f530b6f4f3cd4fad83c2#gistcomment-3471173

@jfversluis Can the fix you created for this get a little bit of love? 🥰

Unfortunately I have lost all my powers on this repo ;) so you PR is just as good as mine. Feel free to take it! :)

I would love to help out, but I am tied up in all kinds of other things at the time being... Sorry!

[vangalasrihitha]

Description
When using a grouped ListView we're getting a top padding in IOS and List view cut distortion as shown in below screenshot (Working fine in Android).

Basic Information
Ran on iOS simulator and a real device on iOS 8 and iPod.

Version with issue: Xamarin forms service pack 11 and below versions too

Screenshots:

Any help would be appreciated.
Thanks in advance.

[jpatel-ilx]

@vangalasrihitha Did you find any workaround for this? We are having similar issue

[MaxFmi]

Still have this issue in Xamarin.Forms 5.0.0.2545.
I guess it still is in .NET MAUI

[xleon]

We are migrating to this library with (for now) really good and performant results: https://www.sharpnado.com/collectionview-maui/