[BUG] Popup broken in multiple ways

[czmirek]

Is there an existing issue for this?

• [X] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [X] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

• Simple use case: show popup with a loading indicator, wait for a second, hide the indicator and show some long text.

    <Border BackgroundColor="White" x:Name="RootBorder" Padding="20">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="12" />
        </Border.StrokeShape>
        <StackLayout Orientation="Vertical">
            <ActivityIndicator x:Name="LoadingActivityIndicator" WidthRequest="50" HeightRequest="50" HorizontalOptions="Center" IsRunning="true" IsVisible="true" />
            <Label x:Name="LabelContent" LineBreakMode="WordWrap" />
        </StackLayout>
    </Border>

The result is broken:

• Word wrap does not take Border's padding into account
• Border does not completely expand

Expected Behavior

• Border expands
• Word wrap takes Border's padding into account

Steps To Reproduce

• https://github.com/czmirek/MauiPopupLabelBug
• Run
• Click "Show popup"
• Observe

Link to public reproduction project repository

https://github.com/czmirek/MauiPopupLabelBug

Environment

- .NET MAUI CommunityToolkit: 7.0.1
- OS: Android 12.1, API 32
- .NET MAUI: 8
- .NET MAUI Controls: 8.0.7

Anything else?

I did not find a workaround :(

[softlion]

I have an issue with the Border control too when something is resized under its hierarchy.

https://github.com/dotnet/maui/issues/20943

[acaliaro]

I have the same problem on iOS. I have created a PR https://github.com/czmirek/MauiPopupLabelBug/pull/1 starting from @czmirek project.

Added more tests and project for iOS. There are different behaviors between iOS and Android. I'll try to list them.

• Popup is the initial popup
• Popup1 displays a "lorem ipsum" string above a red box, and then below the red box another "lorem ipsum" string
• Popup2 displays a red box, and then under the red box a "lorem ipsum" string
• Popup3 like the original popup but with an external grid

on Android it seems that the content resizes correctly but the size of the popup does not change. In Popup3, with the external grid, it seems that the popup also resizes but the string is not handled correctly.

on iOS, content resizes but is cropped. The popup does not change (it has the size of the initially loaded contours). In Popup3, the content resizes but not the popup. In popup2, if you press to the left or right of the red box, the popup closes. it's as if the outside of the popup were pressed (this is also the case in the original popup, and in popup 3 if you press on the lower half of the popup). In popup1 it seems that this tap problem does not exist.

In conclusion, it seems that the popup only works correctly if the controls are all visible when the popup loads.

Here some images for iOS Popup

Popup1

Popup2

Popup3

in Android: Popup

Popup1

Popup2

Popup3

[acaliaro]

I think I have found a workaround. You can find it there https://github.com/acaliaro/MauiPopupLabelBug/commit/30d6ed886e7bb08516f95818e92fe299dc633377

1- add a grid outside the border 2- when the border change the size, set the popup size

    private void RootBorder_SizeChanged(object sender, EventArgs e)
    {
        this.Size = new Size(this.RootBorder.Width, this.RootBorder.Height);
    }

[czmirek]

@acaliaro Unfortunately this is still not a good workaround, you are just lucky with the combination of the padding and the length of the words. If you remove the padding or combine different words, the text is still being clipped :(

[czmirek]

In the meantime I'm converting my popups to Modals using the technique described here

[alzubitariq]

Any workaround for android?

[RandyPJ]

Other thing is, when a create a Popup it comes with errors, the InitializaComponent method is not being recognized. The solution by now is restarting Visual Studio.

[bijington]

Other thing is, when a create a Popup it comes with errors, the InitializaComponent method is not being recognized.

The solution by now is restarting Visual Studio.

That's sadly an issue within Visual Studio and not this toolkit

[bijington]

Any workaround for android?

Have you tried using v8.0 of the toolkit?

[dainius-r]

I can confirm, v8.0 of the toolkit, Border control not resizing based on StackLayout inner content.

[bijington]

I can confirm, v8.0 of the toolkit, Border control not resizing based on StackLayout inner content.

StackLayout is an obsolete control can you try using something else like VerticalStackLayout, etc.

[dainius-r]

My actual code that I tried (didn't heard that StackLayout is obsolete):

<toolkit:Popup ...>
    <Border StrokeShape="RoundRectangle 20" BackgroundColor="some_color">
        <VerticalStackLayout Spacing="20">
            <Grid Margin="20" ColumnDefinitions="Auto,15,Auto,*,Auto">
                <Image Source="{Binding ImageSource}" />
                 <Label Grid.Column="2" Text="{Binding Title}" />
                <Image Grid.Column="4" Source="{StaticResource some_icon}" />
            </Grid>
...
        </VerticalStackLayout>
    </Border>
</toolkit:Popup>