Digital Keyboard Does Not Adjust Screen Height

[Christopher]

On a mobile device when the digital keyboard is active, I am unable to see what I am typing because I am unable to move the dialog content. In the image below, I am typing into the "Due Date" input box, but cannot see my text:

[Kokila Poovendran]

Hi Christopher,

Thank you for bringing this issue to our attention regarding the digital keyboard not adjusting the screen height properly on mobile devices.

We have thoroughly investigated the matter, but unfortunately, we were unable to replicate the issue at our end. Typically, when the dialog content exceeds the maximum height, it should automatically create a scroll for the dialog content by default.

To better assist you, could you please provide more details about the issue you are experiencing? It would be helpful if you could share a detailed replication sample or modify the provided sample to showcase the problem. Additionally, if possible, kindly provide a video illustration of the issue occurring.

Furthermore, could you specify the mobile device you are using where this issue is happening? Knowing the device name would enable us to tailor our investigation more accurately and provide you with a prompt solution.

Please find the sample provided here: https://blazorplayground.syncfusion.com/BtVpjLVZzjbqvXLi

[Christopher]

Hello,

Thank you for looking into this issue and providing a sample. I tested the sample and saw the same results in your video. However, I modified the sample to open as a full screen dialog and am able to see the issue. In the video below, the "OK" and "Cancel" buttons are hidden. I'm unable to upload the video due to filesize restrictions, but here is a link to it stored on Google Photos: https://photos.app.goo.gl/Q5nqKC2qLaopQsw36

Below is the updated sample code:

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Calendars

<div id="target">

    <SfButton @onclick="@(async () => await OpenDialog())">Open Dialog</SfButton>

    <SfDialog @ref="DialogObj" Target="#target" Width="250px" ShowCloseIcon="true">

        <DialogTemplates>

            <Header> Dialog </Header>

            <Content>

                By default, the dialog is displayed in the center of the target container.

                The dialog position can be set using the DialogPositionData property by providing custom X and Y coordinates.

                The dialog can be positioned inside the target based on the given X and Y values.

                By default, the dialog is displayed in the center of the target container.

                The dialog position can be set using the DialogPositionData property by providing custom X and Y coordinates.

                The dialog can be positioned inside the target based on the given X and Y values.

                <SfDatePicker TValue="DateTime?" @bind-Value="@DateValue"></SfDatePicker>

            </Content>

        </DialogTemplates>

        <DialogButtons>

            <DialogButton Content="OK" IsPrimary="true" OnClick="@(async () => await CloseDialog())" />

            <DialogButton Content="Cancel" OnClick="@CloseDialog" />

        </DialogButtons>

    </SfDialog>

</div>

<style>

    #target {

        min-height: 400px;

        height: 100%;

        position: relative;

    }

</style>

@code {

    public DateTime? DateValue { get; set; } = DateTime.Now;

    private SfDialog DialogObj;

    private async Task OpenDialog()

    {

        await DialogObj.ShowAsync(true);

    }

    private async Task CloseDialog()

    {

        await DialogObj.HideAsync();

    }

}

[Kokila Poovendran]

Hi Christopher,

We have reviewed the sample and the video you provided. It seems the "OK" and "Cancel" buttons are indeed hidden in the full-screen dialog mode due to the footer element of the playground sample, as shown in the video.

To better assist you, could you provide us with your entire project for validation? This will help us replicate the issue more accurately and provide a tailored solution.