[BUG] Popup V2 has a large margin/padding on the left and right

[czuck]

Is there an existing issue for this?

• I have searched the existing issues

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

• 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

Popup V1 had a small amount of margin/padding on the left/right:

The same view in Popup V2 has a much wider margin/padding on the left/right:

and I don't see a way to remove it.

Expected Behavior

Margin/padding should be controlled by the view being displayed, ideally the popup would have 0. If not it should be small and/or be controllable in the options.

Steps To Reproduce

Compare a popup created in V1 to one in V2 with the same content

Link to public reproduction project repository

Let me know if a reproduction project is really needed.

Environment

- .NET MAUI CommunityToolkit:
- OS:
- .NET MAUI:

Anything else?

No response

[bijington]

You should be able to control this with the Margin and Padding properties. Please do provide a sample so we can see what you have tried

[czuck]

I agree that I should be able to, if you know how to do this please explain. My popup page contains a grid with padding and margin each set to 0. All of the spacing (except that around the button at the bottom) is part of the popup and something I have not been able to control. I am displaying a webview, but the shaded header stretches from the left to the right of the webview area.

<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="App.Pages.OneTimePage"
CanBeDismissedByTappingOutsideOfPopup="False">



</mct:Popup>

[redwolf2]

You can work around this, by making the Popup Transparent and use your own Container. For it to work do this:

Set Shape to null in the PopupOptions, this will remove the applied margins from the popup, since Rectangle seem to be the default shape and shapes seem to apply a padding to the popup.

That should be it.

If you want to restore the look of the old Popup (like your first screenshot) you must set the popups Padding to 0 and the BackgroundColor to Transparent. Then you can place a container like Border with a white BackgroundColor and a Margin of something like 10 to be able to fully control the look. Sadly styles of the Popup are bugged, so you have to manually set these attributes on every Popup. Shapes in the PopupOptions apply a padding to the popup you can't get rid of so far, unless you do the above.

[redwolf2]

My guess is you didn't provide a reproduction sample as required in the issue docs. That might be the reason, you where send to discussion.

[bijington]

I'm not sure why it was converted to a discussion but I suspect it is because this was believed to not be a bug. We should have followed up on this though

The things to consider for padding on your popup content are:

• Padding on popup directly
• Margin on popup directly
• CornerRadius on the Shape in PopupOptions

The combination of all of the above will likely contribute to some padding being applied. Therefore I would suggest you set the first two properties to 0 and Shape to null as @redwolf2 suggested

[czuck]

I understand why repos are necessary for most issues but this is literally just anything in a popup so it seemed overkill to have to provide a repo, but if that was the issue why didn't they tell me? I did offer to supply one if necessary.
I don't understand why such a big change in the implementation wouldn't be considered a bug.
How do I set the Padding and Margin on the popup to 0? It's not one of the options available in the new PopupOptions.

[bijington]

We ask for a repro for multiple reasons which is explained in the first few lines of the bug report you created. Anyway I can assure you that wasn't the reason for converting to a discussion because you would have been notified about that.

To set the margin on your popup it is simply:

<toolkit:Popup ...
    Margin="0"
    Padding="0">

[czuck]

Thanks! I guess I had a mental block about putting things like that in the same place as the namespace declarations ...