There is a little difference between TelerikUI popup and MAUI popup when Screen Resolution changed.

1 Answer 484 Views
Popup
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
Scofield asked on 14 Apr 2022, 02:39 PM | edited on 14 Apr 2022, 02:45 PM

MAUI popup

Can adjust the location of popup automatically, when Screen Resolution changed

let's say: the placement target change from normal with size to full-screen


TelerikUI popup

just stay where they are, when Screen Resolution changed

 

1 Answer, 1 is accepted

Sort by
0
Antoan
Telerik team
answered on 18 Apr 2022, 05:03 AM

Hi Scofield,

I am not sure I understand the statement correctly.

If the issue is that the Popup does not change its position depending on the screen size, you can easily fix that by using the Placement property.

For example:

this.popup.Placement = PlacementMode.Center;

This line of code positions the Popup to always be at the center of the parent UI element, independent of screen size.

A similar thing can be done in XAML like this:

Placement="Bottom"

For more details about all Popup, Placement options check the following from our documentation 

https://docs.telerik.com/devtools/maui/controls/popup/placement

I hope the provided information helps. If the issue still occurs, please send me the page's definition where the popup control is placed. In this way, I can research the case in detail. 

Regards,
Antoan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 18 Apr 2022, 06:56 AM

Hi Antoan,

Thanks for this feedback, I did have a try with passing the MainPage as PlacementTarget and setting the following placement, but it seems I still have this issue in my side... that's why I open this ticket and I'm using Telerik.UI.for.Maui.0.6.0 with VS2022 Preview2.1

this.popup.Placement = PlacementMode.Center
Antoan
Telerik team
commented on 18 Apr 2022, 01:34 PM

Hello Scofield,

I cannot seem to reproduce the problem. I have attached a demo with the set up I am using, I hope it can help you figure out where the problem lies.

If the issue persists I suggest you modify the demo with the set up you use for the popup and attach it to this forum thread. In this way we can research the case in details.

Regards,
Antoan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 20 Apr 2022, 02:01 PM

I have this issue after click "show_dt_Popup" button, what was the packages you are using?

Didi
Telerik team
commented on 22 Apr 2022, 04:49 AM

Hi Scofield, 

Telerik .NET MAUI 0.6.0

I noticed you use Telerik.NET MAUI 0.6.0 version. I can confirm that the popup works as expected with this version when opened on a button click. This version of Telerik .NET MAUI is compatible with .NET MAUI preview 14. 

Telerik .NET MAUI 0.7.0

We have released a new version of Telerik UI for .NET MAUI 0.7.0 - the version requires visual studio 2022 17.2.0 preview 3.0 and compatible with .NET MAUI RC 1. I suggest you update the Telerik UI for .NET MAUI version and Visual Studio version. 

Popup Examples:
The example here https://docs.telerik.com/devtools/maui/controls/popup/popup-getting-started is from our SDK Maui demo app.

If you still have issues with the popup control, please send us a sample runnable project where the behavior can be reproduced. 

 

 

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 08 Jun 2022, 12:56 PM

it seems we have the same issue in Telerik.NET MAUI 1.0.1 version with MAUI GA 6.0.312
Matthew
Top achievements
Rank 1
commented on 08 Jun 2022, 06:47 PM

The popup does not revert to centered after maximizing and restoring. Here are some images to illustrate the issue before maximize, after maximize, and after restore.

 

 

 

 

Didi
Telerik team
commented on 09 Jun 2022, 08:40 AM

Hi Scofield, 
Could you please share what is the exact issue you have with Popup when using Telerik .NET MAUI 1.0.1 version?

Hi Matthew, 
I have reproduced the behavior when window is minimized/maximized and when the popup placement target is UI control, for example, button, checkbox, etc. I have logged this on your behalf. Follow the item at this link: https://feedback.telerik.com/maui/1568308-popup-android-ios-windows-incorrect-position-when-device-is-rotated-screen-is-resized-when-placement-target-is-control 

I cannot reproduce the issue when placement target is the page or layout (Stack/Grid). Could you please share what is the placement target of the popup you use? 
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Jun 2022, 11:48 AM

Hi Didi,

when window is minimized/maximized or drag window to change the size.

The popup placement target is the page

Didi
Telerik team
commented on 09 Jun 2022, 12:30 PM

I cannot reproduce the issue when the target is a page: 
Here is my code: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="MauiApp5.MainPage">

    <StackLayout Margin="0, 40, 0, 0">
        <Button Text="Open Popup" Clicked="Button_Clicked"/>
    </StackLayout>

    <!-- the popup is attached to the page -->
    <telerik:RadPopup.Popup>
        <telerik:RadPopup x:Name="popup"
                                    Placement="Center">
            <telerik:RadBorder CornerRadius="8"
                                     BackgroundColor="#93D7FF" 
                                     WidthRequest="250" 
                                     Padding="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="30" />
                    </Grid.RowDefinitions>
                    <Label Text="ACCEPT TERMS" />
                    <Label Grid.Row="1"
                       Text="By checking this, you agree to the Terms of Service and Privacy Policy." />
                    <Button Grid.Row="2"
                        Padding="2" 
                        HorizontalOptions="Start" 
                        Text="Agree &amp; Continue" 
                        Clicked="Button_Clicked1" 
                        CornerRadius="6"
                        BackgroundColor="#7A9BFF"
                        TextColor="White"/>
                </Grid>
            </telerik:RadBorder>
        </telerik:RadPopup>
    </telerik:RadPopup.Popup>

</ContentPage>

Maybe I am missing something in the setup. Send me a repro project where the issue can be reproduced. The app I use is the .NET MAUI project template.

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Jun 2022, 12:35 PM | edited

Hi Didi, let me give it a try in a brand new .NET MAUI project and get back to you later. 

Quick question for you: where did you set the placement target in your code?

Didi
Telerik team
commented on 09 Jun 2022, 12:52 PM

In my code the popup is attached to the Page, so its placement target is the ContetPage. I have left comment inside the code snippet
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 09 Jun 2022, 01:45 PM | edited

Hi Didi,

no luck in a brand new .NET MAUI project and here is my code:


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             x:Class="MauiGA.MainPage"
             x:Name="HomePage">
    <ContentPage.Resources>
        <DataTemplate x:Key="PopupTemplate">
            <Grid Padding="10" BackgroundColor="ForestGreen">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="50" />
                </Grid.RowDefinitions>
                <Label Text="ACCEPT TERMS" />
                <Label Grid.Row="1"
                     Text="By checking this, you agree to the Terms of Service and Privacy Policy." />
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>		 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">
            <Button 
                x:Name="PlacementTargetHomePage"
                Text="PlacementTargetHomePage"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>


private void OnCounterClicked(object sender, EventArgs e)
	{
        RadPopup tPopup = new RadPopup();
        tPopup.ContentTemplate = (DataTemplate)Resources["PopupTemplate"];
        tPopup.PlacementTarget = HomePage;
        tPopup.Placement = PlacementMode.Center;
        tPopup.IsOpen = true;
    }

 

Didi
Telerik team
commented on 09 Jun 2022, 02:40 PM

Same issue as the one I have logged in the feedback portal. It seems it happens when using control template. 

In the example I have used, the popup and its content is directly attached to the page.
Please follow the feedback item to track its progress: https://feedback.telerik.com/maui/1568308-popup-android-ios-windows-incorrect-position-when-device-is-rotated-screen-is-maximized-minimized 

I cannot suggest a workaround for this issue.
Tags
Popup
Asked by
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Antoan
Telerik team
Share this question
or