How do I address Popup view truncation in iOS?

1 Answer 101 Views
Popup
Arthur
Top achievements
Rank 1
Arthur asked on 06 Sep 2023, 11:22 PM

This is a follow-up question this question.

I followed the example provided for the question above in order to show a RadPopup programmatically from a ViewModel. However, I am running into a specific issue on iOS where the popup truncates the content at the bottom.

My CreatePopupContent method body looks like this:

private View CreatePopupContent() 
{    
    VerticalStackLayout stack = new VerticalStackLayout() 
    {
        Spacing = 10,
        Padding = new Thickness(20),
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Fill,
        BackgroundColor = /*(Color)Application.Current.Resources.GetValueOrNull("Gray100")*/ Colors.LightGray,
        WidthRequest = 350
    };

    Label titleLabel = new Label() 
    {
        Text = /*popupTitle*/"Lorum ipsum",
    };

    stack.Children.Add(titleLabel);

    Label messageLabel = new Label() 
    {
        Text = /*popupMessage*/ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    };

    stack.Children.Add(messageLabel);

    var dismiss = new Button { Text = "Ok", Command = this.ClosePopupCommand, CommandParameter= "Ok" };

    var lorum= new Button { Text ="Lorum", Command = this.ClosePopupCommand, CommandParameter = "Lorum" };
    var ipsum= new Button { Text =  "Ipsum", Command = this.ClosePopupCommand, CommandParameter =  "Ipsum" };

    stack.Children.Add(dismiss);
    stack.Children.Add(lorum);
    stack.Children.Add(ipsum);

    Border border = new Border()
    {
        StrokeShape = new RoundRectangle
        {
            CornerRadius = new CornerRadius(20)
        },
        Content = stack,
        VerticalOptions = LayoutOptions.Fill,
    };

    return border;
}
After the message label reaches a certain length, the popup begins to truncate the bottom-most buttons. If the message increases in length, the bottom-most buttons are clipped out entirely.

Is there any way to fix this or has anyone encountered this issue before? It's brand new to me.

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 07 Sep 2023, 05:26 AM

Hi Arthur,

The behavior happens because of the layout used. You use stack and it seems it does not provide enough space the content to fill into. You can replace the stack with a Grid with * sized row definition. Or set a height request to the stack and wrap it in a ScrollView. 

Give this a try and let me know whether the behavior is solved. 

Regards,
Didi
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Tags
Popup
Asked by
Arthur
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or