Description

In iOS and MacCatalyst, there is flaw in the VerticalStackLayout height calculation that impacts the height of content. Specifically, when a Label is placed within a VerticalStackLayout that has its width set, the Label height is miscalculated to be the height it would be if the width weren't set.

For an example, I've created a repro application that shows this in action. (https://github.com/DancesWithDingo/MAUI_LabelTextWrapSample.git)

Steps to Reproduce

Create a new .NET MAUI app. In MainPage.xaml, replace the content with the following:

<VerticalStackLayout Spacing="20" Margin="20">
    <VerticalStackLayout BackgroundColor="Yellow">
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore."/>
    </VerticalStackLayout>

    <VerticalStackLayout WidthRequest="240" BackgroundColor="Yellow">
        <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore."/>
    </VerticalStackLayout>
</VerticalStackLayout>

Run on iOS device with narrow screen. Note that the first label (without a width set) displays all of the text (two lines), and the second label (with with set to 240) only displays the first two lines.

The sample repo provided shows the situation a bit more clearly. On MainPage, there are three VerticalStackLayout controls (and a fourth Grid). The first (yellow) instance has no width set. The second (green) example has the VerticalStackLayout width set to 300. The third (blue) example has no width set on the VerticalStackLayout, but instead the width is set on the label. The fourth example (orange) shows what happens when a Grid is used instead of the VerticalStackLayout.

Note when first run that the yellow label appears normally, taking up two lines of text. The green and yellow labels have the same height as the yellow label, but the text does not extend vertically as it should (and does on Android). And the orange example shows three lines and all of the text.

Press the Toggle button, which doubles the amount of text in the labels. Yellow and blue jump to four lines (truncated), and the orange grid displays normally.

The labels are colored with a lighter color to make it clear that it's the height of the label that is at issue, not the height of the containing VerticalStackLayout.

My takeaway is that the size calculation is returning the wrong height when width is restricted. I haven't tested it, but my assumption is this happens in the horizontal orientation as well.

Link to public reproduction project repository

https://github.com/DancesWithDingo/MAUI_LabelTextWrapSample.git

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 16.4

Did you find any workaround?

Wrapping with a grid instead of the VSL works, but is less ideal in many situations, not to mention potential performance issues implied by having nested grids.