Shell Flyout header spacing and dynamic height issue on iOS

[akhilvswoodplc]

Description

Shell flyout header on iOS shows a spacing on the top between navigation bar and header. Also the Header height is not dynamically adjusting with the content bind to it after rendering the Shell layout

On Android, this is working fine and layout expands with consistent spacing with dynamic content.

Steps to Reproduce

Add a shell layout and add a flyout header with some dynamic content bind to it. Set the dynamic data after rendering the Shell.

<Shell.FlyoutHeader> <VerticalStackLayout Padding="10" BackgroundColor="{Binding BackgroundColour}" MinimumHeightRequest="80" VerticalOptions="CenterAndExpand"> <Label FontSize="22" Style="{StaticResource BoldLabel}" Text="{Binding Session.UserName}" TextColor="White" /> <Label FontSize="Small" Text="{Binding Session.LevelE, Converter={StaticResource levelEConverter}}" TextColor="White" /> </VerticalStackLayout> </Shell.FlyoutHeader>

Link to public reproduction project repository

No response

Version with bug

8.0.91 SR9.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[similar-issues-ai[bot]]

We've found some similar issues:

• #11679 , similarity score: 83%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[akhilvswoodplc]

We've found some similar issues:

• [iOS] Spacing between Header and FlyoutItems on iOS only #11679 , similarity score: 83%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

This ticket is closed, but still not resolved

[akhilvswoodplc]

https://github.com/akhilvswoodplc/MauiShellIssueRepro

Added the repro sample in this repo.

As in the screenshot, there is a top spacing between statusbar and flyout header. Also if the flyout header content is dynamically added, the bottom spacing is pushing the flyout item downwards keeping an empty space between.

Static content

Dynamic content after page loaded

[ninachen03]

This issue has been verified using Visual Studio 17.12.0 Preview 4(8.0.92 & 8.0.71). Can repro this issue at iOS platform.

[kubaflo]

Hi! I cannot replicate the header scaling issue on NET 9

When it comes to header spacing it looks more like a status bar issue which is not handled by MAUI, but by the Community toolkit

This is how the safe area should look like and it appears to me that MAUI correctly places the flyout within its safe area

[akhilvswoodplc]

Hi! I cannot replicate the header scaling issue on NET 9

When it comes to header spacing it looks more like a status bar issue which is not handled by MAUI, but by the Community toolkit

This is how the safe area should look like and it appears to me that MAUI correctly places the flyout within its safe area

The issue comes when you have a different statusbar color. The image shows just white color. When you change that, the spacing is evident.

@kubaflo On this "When it comes to header spacing it looks more like a status bar issue which is not handled by MAUI, but by the Community toolkit" : I dont think it is Statusbar issue, because on normal contentpage, there is no spacing issue. The issue comes only with flyout header

[akhilvswoodplc]

@kubaflo

The issue comes when you have a different statusbar color. The image shows just white color. When you change that, the spacing is evident. On this "When it comes to header spacing it looks more like a status bar issue which is not handled by MAUI, but by the Community toolkit" : I dont think it is Statusbar issue, because on normal contentpage, there is no spacing issue. The issue comes only with flyout header

[kubaflo]

@akhilvswoodplc By I cannot relocate it on Net9 I meant the scaling issue not the spacing. But I still think that the status flyout header is correctly placed (I might be wrong though)

This is similar to https://github.com/dotnet/maui/issues/24972

[jsuarezruiz]

@jfversluis Could we transfer this issue to the Community Toolkit repo? I think have more sense there.

[jfversluis]

This is indeed something for the .NET MAUI CommunityToolkit.

Already reported here: https://github.com/CommunityToolkit/Maui/issues/2287 so please track the progress there. Closing this one here for now.