SfPopup not filling the entire screen

[Nicolas]

I am using the SfPopup control to recreate the 'OnBoard help' which can be found here: Syncfusion OnBoard help

The problem however is that my SfPopup is not filling the entire screen height of my page. It becomes more obvious when setting the background color on the SfPopup, most of the screen gets an overlay but the bottom of the screen isn't. Any clue how I can overlay the entire height?

I reproduced the issue in an entire new Xamarin.Forms project (black app). The issue (made visible):

You can clearly see that the bottom is not getting an overlay.

The XAML of the page (no background code is involved, only XAML):

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

    x:Class="App7.MainPage"

    xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    xmlns:popuplayout="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"

    NavigationPage.HasNavigationBar="False">

    <ContentPage.Content>

        <popuplayout:SfPopupLayout

            x:Name="popupLayout"

            BackgroundColor="Yellow"

            IsOpen="True"

            StaysOpen="True">

            <popuplayout:SfPopupLayout.PopupView>

                <popuplayout:PopupView

                    AnimationMode="None"

                    BackgroundColor="Transparent"

                    HorizontalOptions="FillAndExpand"

                    ShowFooter="False"

                    ShowHeader="False"

                    VerticalOptions="FillAndExpand">

                    <popuplayout:PopupView.ContentTemplate>

                        <DataTemplate>

                            <Label Text="Hello" TextColor="Red" />

                        </DataTemplate>

                    </popuplayout:PopupView.ContentTemplate>

                    <popuplayout:PopupView.PopupStyle>

                        <popuplayout:PopupStyle BorderColor="Transparent" />

                    </popuplayout:PopupView.PopupStyle>

                </popuplayout:PopupView>

            </popuplayout:SfPopupLayout.PopupView>

        </popuplayout:SfPopupLayout>

    </ContentPage.Content>

</ContentPage>

[Suja Venkatesan]

Hi Nicolas, 

Thank you for contacting Syncfusion support. 

Regarding issue ”SfPopup not filling the entire Screen”. 

We have checked the reported issue in Android device having API 28(Android 9.0) with latest version of our Popup Control(Version-19.2.0.60) and Xamarin.Forms(Version-5.0.0.2083) . Popup shown in entire screen of our end. Please refer the output image which we taken as output by referring your given code snippet. Can you please let us know your tested Device with android version and version of your Popup control and Xamarin.Forms. It will be more helpful for us to find the exact cause for the issue. 

Image link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Desktop1562843292.zip 

Regards, 

Suja.

[Nicolas]

My build, with the issue, was done using Android 11.0 (R) on a Pixel 4 (API 31) and also tested it on a real device (samsung S10, Android 11) with the same result. My package versions: Syncfusion.Xamarin.SfPopupLayout 19.2.0.60 and Xamarin.Forms 5.0.0.2012

[Nicolas]

After some more testing, it looks like it is working on other emulators (Pixel 2, 3, 3XL) but is just doesn't seem to work correctly on Pixel 4 or Samsung 10S.. perhaps some more that do't work..? 

[Nicolas]

*Correction, on the Pixel 3XL it also does not seem to work. Perhaps it is a big screen issue?

As far as I can see it works on the following tested devices:

• Pixel 3 (1080 x 2160)
  
• Pixel 3a XL (1080 x 2160)
• Pixel 2 (1080 x 1920)

It doesn't fill the entire screen on the following devices:

• Pixel 3 XL (1440 x 2960)
• Pixel 4 XL (1440 x 3040)
• Pixel 4 (1080 x 2280) 
  
• Samsung S10 (tested on real device) - (1080 x 2280)

So it appears the threshold lies at a height between 2160 --> 2280, where at 2160 it displays on the entire screen but from / at 2280 it doesn't..

*Some more investigation.

On the Samsung Pixel 2 XL (1440x2880) - tested on a real device - it DOES work.. but on that phone the phone 'header' / ICON bar is not calculated in the phone height, or that phone does not seem to have a ICON bar but the screen height is what you see is what you get.

ON the S10 you can see that the ICON bar is bigger than the ICON bar of the Pixel 2 XL, and the ICON bar seems to be included in the calculation of the screen width, the height which the popup is not covering seems to be equal to the height of the ICON bar:

On the PIXEL 2 XL the APP icon bar is smaller and there the height seems to be calculated correctly with the popup:

For some reason my second image upload is not showed correctly, so I added it in the following URL:

https://i.postimg.cc/c4hhgxf7/example-Pixel-2-XL.png

[Ranjith Kumar Durairaj]

Hi Nicolas, 

We are currently validating the reported issue. We will validate and update further details on or before 14^th September 2021.

Regards,
Ranjith Kumar 

[Karthikraja Kalaimani]

Hi Nicolas,

Thanks for your patience.

We have checked the reported issue "Overlay is getting cropped at bottom in pixel 3 XL (emulator)" and we discovered that if we opened the popupview before page is rendered in pixel 3 XL, we are getting improper screen height. So, we suggest you to open the PopupView when page is rendering. For more details, please refer to the below code snippets.

Code snippet :

public partial class MainPage : ContentPage

{

public MainPage()

{

InitializeComponent();

this.PropertyChanged += MainPage_PropertyChanged;

}

private void MainPage_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

if (e.PropertyName == "Renderer")

{

popupLayout.Show();

}

}

protected override void OnAppearing()

{

base.OnAppearing();

}

.....

}

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/PopupDemo-1636381355.zip

Regards,
Karthik Raja