Unplanned
Last Updated: 07 Aug 2019 11:03 by ADMIN
Narender
Created on: 06 Aug 2019 20:10
Category: Popup
Type: Bug Report
2
Popup[iOS]: Incorrect positioned on iPad when the device is rotated

Hi,

I'm using a popup and If the device is rotated when the pop-up is open, the UI gets disorted and gets a white space on sides or becomes uneven.

Please see the attached screenshots and below code to replicate the issue. Not sure about this issue occurring on android tablets.

 


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewRefresh"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="ListViewRefresh.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button HorizontalOptions="Center" Grid.Row="0"
        VerticalOptions="Start" 
        Text="Click here to rate" 
        Clicked="BtnTest_Clicked">
            <telerikPrimitives:RadPopup.Popup>
                <telerikPrimitives:RadPopup x:Name="popup"
                                    Placement="Bottom"
                                    OutsideBackgroundColor="#6F000000">
                    <telerikPrimitives:RadBorder CornerRadius="8" 
                                         WidthRequest="800" 
                                         HeightRequest="1000"
                                         Padding="10"
                                         VerticalOptions="FillAndExpand"
                                         BackgroundColor="Wheat">
                        <Grid Padding="20">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30" />
                                <RowDefinition Height="20" />
                                <RowDefinition Height="40" />
                            </Grid.RowDefinitions>
                            <Label Text="Please rate your experience" />
                            <telerikInput:RadShapeRating Grid.Row="1" />
                            <Button Grid.Row="2"
                            Padding="2"
                            HorizontalOptions="End" 
                            Text="Send" 
                            Clicked="Button_Clicked" />
                        </Grid>
                    </telerikPrimitives:RadBorder>
                </telerikPrimitives:RadPopup>
            </telerikPrimitives:RadPopup.Popup>
        </Button>
    </Grid>

    
</ContentPage>

 

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ListViewRefresh
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void BtnTest_Clicked(object sender, EventArgs e)
        {
            popup.IsOpen = true;
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            popup.IsOpen = false;
        }
    }
}

1 comment
ADMIN
Didi
Posted on: 07 Aug 2019 11:02
Hello Narender,

Thank you for the provided information.

I have reproduced the issue on my side and I have converted this ticket into a public bug report. Please follow the item in order to receive an email notification when its status changes. I have also updated your Telerik points as a small sign of gratitude for your involvement.

Workaround:

As a workaround you can override the OnSizeAllocated method on a Page, inserting any layout change logic there. The OnSizeAllocated method is called whenever a Page is allocated a new size, which happens whenever the device is rotated. Note that the base implementation of OnSizeAllocated performs important layout functions, so it is important to call the base implementation in the override:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
}

More information about this can be found at the link below:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows#reacting-to-changes-in-orientation

Mainly, inside the OnSizeAllocated method you need to change the RadBorder width and height when the width and the height of the page are changed. For example:

 
protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    //reconfigure layout
    if (width != this.width || height != this.height)
    {
        this.width = width;
        this.height = height;
 
        if (width > height)
        {
            border.HeightRequest = 400;
            border.WidthRequest = 600;
        }
        else
        {
            border.HeightRequest = 800;
            border.WidthRequest = 1000;
        }
    }
}

I have attached my test project for reference.

Regards,
Didi
Progress Telerik
Attached Files: