A page is consuming more width than what the parent window gives the space.

[Mohsens22]

Current behavior

I have a page in my uno project. In UWP everything is just fine and every page is working as expected. But in one of my pages where I show some information to the user, the page gets an extremely high width (tested in WASM) and it gets out of the window border. In order to see the page fully, I need to zoom out via the browser's zooming tool.

However there is a fun fact here:
I used a visual state manager. This visual state manager acts just fine and responds to window size changes and applies what should be applied, however, the the page still uses more width,

Expected behavior

I expect the page to be stretched to the parent frame and window as it's happening in UWP.

How to reproduce it (as minimally and precisely as possible)

Here is a link to my repo

Firstly run the UWP application in DEBUG mode and from the start page hit the "LoadTestAnswer" button. this button will load some dummy data:

As you can see, the UI is pretty responsive and neat.
However if you do the same to the WASM project you'll notice that something is wrong:

As you can see, although the page reacts to the implemented Visual State Manager, the actual page does not fit itself to the frame which is kinda odd.

Environment

• [x ] Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia
• Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia
• Uno.SourceGenerationTasks
• Uno.UI.RemoteControl / Uno.WinUI.RemoteControl
• Other:

Nuget Package Version(s):

Affected platform(s):

• iOS
• Android
• WebAssembly
• WebAssembly renderers for Xamarin.Forms
• macOS
• Skia
  • WPF
  • GTK (Linux)
  • Tizen
• Windows

I have not tested this on other platforms, I can not tell if this issue exists on other platforms or not.
IDE:

• [x ] Visual Studio 2019 (version: latest)

Anything else we need to know?

• I wasn't able to do any AOT compilation

[Mohsens22]

uwp.mp4

wasm.mp4

[francoistanguay]

Special mention and kudos for the IMPRESSIVE quality of your bug report. We'll have the team look at it asap and keep you posted.

Thank you for taking the time to properly file this, it's beyond appreciated.

12/10!

[carldebilly]

This looks like the result of an exception during the layouting. On wasm, a lot of exceptions are not catched because of a performance issue.

Please press F12 and check the console for error messages.

[Mohsens22]

@carldebilly
localhost-1612320307231.log

Here is a dump from my console while running in Debug and navigating through pages. I took a look at it and honestly I didn't see anything problematic.

[MartinZikmund]

@Mohsens22 I noticed the results page is wrapped in a ScrollViewer, it seems adding HorizontalScrollMode="Disabled" to it fixes the problem. Can you test on your side please, as a workaround?

[jeromelaban]

Also note that Pivot may show a ScrollViewer issue (there's one in the template). You can try overriding the Pivot control template and see if removing the ScrollViewer in the template helps.

[MartinZikmund]

From my debugging, it seems that SfChart gets Infinite available width in MeasureOverride, whereas on UWP it always gets only the width equal to the window size

[Mohsens22]

From my debugging, it seems that SfChart gets Infinite available width in MeasureOverride, whereas on UWP it always gets only the width equal to the window size

@MartinZikmund How can we fix it?

[Mohsens22]

Also note that Pivot may show a ScrollViewer issue (there's one in the template). You can try overriding the Pivot control template and see if removing the ScrollViewer in the template helps.

@jeromelaban I am not using any Pivot, I use a tab view from the Community Toolkit.

[Mohsens22]

I fixed the issue by setting HorizontalAlignment="Stretch" and disabling the horizontal scroll viewer in the grid.