[iOS] Fix for Flyout title is not broken over multiple lines when you rotate your screen. #29171

BagavathiPerumal · 2025-04-24T12:12:21Z

Root cause

The issue originated from missing Auto Layout constraints in the UIContainerCell implementation. Without explicit constraints anchoring the platform view to its container edges, the view failed to properly resize during orientation changes. This constraint deficiency prevented iOS from accurately calculating available width when transitioning to landscape mode, causing text content to be cropped rather than wrapped appropriately.

Description of Issue Fix

The fix ensures proper layout by applying Auto Layout constraints that correctly position the platformView within its parent container, accounting for the specified margin values. By setting TranslatesAutoresizingMaskIntoConstraints to false, the platformView is aligned using explicit constraints on all edges (leading, trailing, top, and bottom) relative to the ContentView. This approach ensures the platformView respects its margins and resizes appropriately during orientation changes.

This ensures that any text elements within the view have the correct width information to wrap text appropriately in both portrait and landscape orientations.

Tested the behavior in the following platforms.

Windows
Mac
iOS
Android

Issues Fixed

Fixes #15154

Output

Before Issue Fix	After Issue Fix
BeforeFix-FlyoutText.mov	AfterFix-FlyoutText.mov

dotnet-policy-service · 2025-04-24T12:12:40Z

Hey there @@BagavathiPerumal! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

jsuarezruiz · 2025-04-25T06:03:22Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-04-25T06:03:34Z

Azure Pipelines successfully started running 1 pipeline(s).

Copilot

Pull Request Overview

This PR fixes an issue where the Flyout title was not wrapping correctly when the device rotated by adding explicit Auto Layout constraints in UIContainerCell. Key changes include:

Adding constraints to platformView in UIContainerCell to fill its container.
Introducing new test cases in both the shared tests and host app to validate the fix.
Updating Shell pages in the host app to support testing of various Flyout scenarios.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

File	Description
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue15154.cs	Adds a UI test case to verify Flyout text wrapping on orientation change.
src/Controls/tests/TestCases.HostApp/Issues/Issue15154.cs	Implements a Shell page with multiple ShellContent instances for testing.
src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/UIContainerCell.cs	Fixes the layout issue by adding explicit constraints for platformView.

Copilot · 2025-04-25T09:24:54Z

src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/UIContainerCell.cs

 			platformView.AccessibilityTraits |= UIAccessibilityTrait.Button;
+			platformView.TranslatesAutoresizingMaskIntoConstraints = false;
+
+			ContentView.LeadingAnchor.ConstraintEqualTo(platformView.LeadingAnchor).Active = true;


For clarity and to better express the intended relationship, consider constraining platformView's LeadingAnchor to ContentView's LeadingAnchor rather than the other way around. This aligns with common Auto Layout practices.

jsuarezruiz · 2025-04-30T09:37:20Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-04-30T09:37:33Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-05-05T06:53:41Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-05-05T06:53:52Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-05-08T11:56:16Z

src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/UIContainerCell.cs

+			platformView.TranslatesAutoresizingMaskIntoConstraints = false;
+
+			var margin = view.Margin;
+			platformView.LeadingAnchor.ConstraintEqualTo(ContentView.LeadingAnchor, (nfloat)margin.Left).Active = true;


Can you create a NSLayoutConstraint[] with all the constraints and then use the method NSLayoutConstraint.ActivateConstraints(constraints); to active all of them at once? Is more efficient than individually.

@jsuarezruiz, I have updated the code based on your suggestion. Could you please share your concerns on this.

jsuarezruiz · 2025-05-08T11:57:11Z

src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/ShouldFlyoutTextWrapsInLandscape.png

Is this snapshot correct? Seems that the first item, the selected one, is clipped.

@jsuarezruiz, This appearance is consistent with the snapshots generated by the CI pipeline. When the device is in horizontal orientation, the CI system appears to crop the top region of iOS snapshots. As a result, similar cropping can be observed across other related test cases. For your reference, please refer to the attached snapshot link.

https://github.com/dotnet/maui/blob/main/src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/BorderBackgroundSizeUpdatesWhenRotatingScreen.png

jsuarezruiz · 2025-05-27T08:02:59Z

/rebase

…s instead of truncating in landscape mode.

…e edges of platformView.

…tItem and updated Android snapshot.

…onstraint.ActivateConstraints() for better performance with Shell flyout margins.

jsuarezruiz · 2025-05-27T08:05:07Z

/azp run

azure-pipelines · 2025-05-27T08:05:29Z

Azure Pipelines successfully started running 3 pipeline(s).

… rotate your screen. (#29171) * fix-15154-Added proper Auto Layout constraints to ensure content wraps instead of truncating in landscape mode. * fix-15154-Prepared the testcase and snapshot added for android and iOS. * fix-15154-Modified the test condition. * fix-15154-Modified the code to align the edges of ContentView with the edges of platformView. * fix-15154-Adjusted inset constraints to respect view margins in FlyoutItem and updated Android snapshot. * fix-15154-Replaced individual .Active=true calls with batch NSLayoutConstraint.ActivateConstraints() for better performance with Shell flyout margins.

@Shalini-Ashokan

For more information about inflight process check https://github.com/dotnet/maui/wiki/Inflight-Branch-Process # .NET MAUI Release Notes - inflight/candidate Branch ## MAUI Product Fixes * [iOS] Fix SwipeView programmatic open when background color is set by @Shalini-Ashokan in #29765 * [iOS] FormattedText with text color causes stack overflow - fix by @kubaflo in #29874 * [iOS] Fix AdaptiveTrigger not working as expected by @jsuarezruiz in #20987 * [iOS] Fix for Flyout title is not broken over multiple lines when you rotate your screen by @BagavathiPerumal in #29171 * [Windows] Fix for Assigning null to the SelectedItem of the CollectionView in the SelectionChanged event does not clear the selection by @SyedAbdulAzeemSF4852 in #29288 * Fix TapCoordinates method in Catalyst by @jsuarezruiz in #29775 * Fixed ItemSpacing on CarouselView resizes items [Android] by @Dhivya-SF4094 in #29796 * Perf : ButtonContentTypeConverter now using InvariantCulture to parse double by @antoine-jonathan in #25393 * ToolbarItem behavior with ImageSource iOS - fix by @kubaflo in #28833 * [Android] Fixed Button Shadow Color Transparency Not Applied Correctly by @NanthiniMahalingam in #29371 * Don't call NSAttributedString with HTML from a background thread by @kubaflo in #26153 * [Windows] Implemented the Resize and Downsize functions in the W2DImage class by @HarishwaranVijayakumar in #29138 * Templated indicator view - improvements by @kubaflo in #25642 * Update Issue25946.xaml by @anandhan-rajagopal in #30025 ## Testing * Fixed Test case failure in PR 26153 - iOS by @kubaflo in #29906 * Fixed Test case failure in PR 25642 - snapshots by @kubaflo in #29881 * [Testing] Feature Matrix UITest Cases for RadioButton by @TamilarasanSF4853 in #29744 * [Testing] Feature Matrix UITest Cases for CollectionView ItemsSource Feature by @LogishaSelvarajSF4525 in #29322 * [Testing] Feature Matrix UITest Cases for Stepper by @nivetha-nagalingam in #29731 * [Testing] Feature Matrix UITest Cases for CheckBox Control by @anandhan-rajagopal in #29739 * Update the comment for the test properties by @mattleibow in #27306 ## Dependency Updates * No changes in this category ## Docs * No changes in this category ## Housekeeping * [create-pull-request] automated change by @github-actions[bot] in #29875 * [create-pull-request] automated change by @github-actions[bot] in #29792 * [create-pull-request] automated change by @github-actions[bot] in #29760 **Full Changelog**: origin/main...origin/inflight/candidate

… rotate your screen. (#29171) * fix-15154-Added proper Auto Layout constraints to ensure content wraps instead of truncating in landscape mode. * fix-15154-Prepared the testcase and snapshot added for android and iOS. * fix-15154-Modified the test condition. * fix-15154-Modified the code to align the edges of ContentView with the edges of platformView. * fix-15154-Adjusted inset constraints to respect view margins in FlyoutItem and updated Android snapshot. * fix-15154-Replaced individual .Active=true calls with batch NSLayoutConstraint.ActivateConstraints() for better performance with Shell flyout margins.

dotnet-policy-service bot added the community ✨ Community Contribution label Apr 24, 2025

dotnet-policy-service bot added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Apr 24, 2025

jsuarezruiz added platform/ios area-controls-flyout Flyout labels Apr 25, 2025

BagavathiPerumal marked this pull request as ready for review April 25, 2025 09:24

Copilot AI review requested due to automatic review settings April 25, 2025 09:24

BagavathiPerumal requested a review from a team as a code owner April 25, 2025 09:24

BagavathiPerumal requested review from StephaneDelcroix and tj-devel709 April 25, 2025 09:24

Copilot AI reviewed Apr 25, 2025

View reviewed changes

jsuarezruiz requested changes May 8, 2025

View reviewed changes

BagavathiPerumal added 6 commits May 27, 2025 08:03

fix-15154-Added proper Auto Layout constraints to ensure content wrap…

42bea4a

…s instead of truncating in landscape mode.

fix-15154-Prepared the testcase and snapshot added for android and iOS.

96f7e46

fix-15154-Modified the test condition.

b106de5

fix-15154-Modified the code to align the edges of ContentView with th…

6bc71b8

…e edges of platformView.

fix-15154-Adjusted inset constraints to respect view margins in Flyou…

ad383b7

…tItem and updated Android snapshot.

fix-15154-Replaced individual .Active=true calls with batch NSLayoutC…

99ee7a1

…onstraint.ActivateConstraints() for better performance with Shell flyout margins.

github-actions bot force-pushed the fix-15154 branch from 0a86ed8 to 99ee7a1 Compare May 27, 2025 08:03

jsuarezruiz approved these changes Jun 5, 2025

View reviewed changes

PureWeen changed the base branch from main to inflight/current June 6, 2025 15:33

PureWeen merged commit 1bed789 into dotnet:inflight/current Jun 6, 2025
129 checks passed

PureWeen mentioned this pull request Jun 20, 2025

[2025/06/16] Candidate - In Flight Branch #29886

Merged

PureWeen added this to the .NET 9 SR9 milestone Jun 23, 2025

github-actions bot locked and limited conversation to collaborators Jul 24, 2025

[iOS] Fix for Flyout title is not broken over multiple lines when you rotate your screen. #29171

[iOS] Fix for Flyout title is not broken over multiple lines when you rotate your screen. #29171

Uh oh!

Conversation

BagavathiPerumal commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root cause

Description of Issue Fix

Issues Fixed

Output

Uh oh!

dotnet-policy-service bot commented Apr 24, 2025

Uh oh!

jsuarezruiz commented Apr 25, 2025

Uh oh!

azure-pipelines bot commented Apr 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Apr 30, 2025

Uh oh!

azure-pipelines bot commented Apr 30, 2025

Uh oh!

jsuarezruiz commented May 5, 2025

Uh oh!

azure-pipelines bot commented May 5, 2025

Uh oh!

jsuarezruiz May 8, 2025

Choose a reason for hiding this comment

Uh oh!

BagavathiPerumal May 9, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz May 8, 2025

Choose a reason for hiding this comment

Uh oh!

BagavathiPerumal May 9, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented May 27, 2025

Uh oh!

jsuarezruiz commented May 27, 2025

Uh oh!

azure-pipelines bot commented May 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

BagavathiPerumal commented Apr 24, 2025 •

edited

Loading