Dialog UI issues on mobiles

[Eimantas Baigys]

Hello, since I started created view for mobiles I noticed that Modal dialogs have some issues on device rotation.

In the example bellow you can see that if I open dialog which does not fit to screen and needs scrolling down at the bottom I have two buttons. Now if I rotate to horizontal and scroll to the bottom view is bugged and I cannot event see half of the content. I am using chrome dev tools but it works the same way on samsung phone. Any ideas how I resolve this?

[Vinitha Jeyakumar]

Hi Eimantas,

We have tried to reproduce the reported issue by rotating the screen to horizontal view and scrolled to the bottom of the dialog. but unfortunately we didn't face any issues. we have also prepared a video for your reference,

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video_Mob-2052547476

Can you please share the following details,

• Exact issue reproducing steps or video illustration.
• Issue reproducing code or runnable sample.
• Your Mobile device name and its model.
• Your browser

The above details will be helpful for us to replicate the issue at our end and help you at earliest.

Regards,

Vinitha

[Eimantas Baigys]

You need to rotate device in order to produce the issue. Load dialog (vertically) which does not fit on the screen and you need to scroll down. Then rotate to horizontal position and you should get only half of your content available.

Video you provided works fine for me too

If you still cannot reproduce it I will make a video

[Vinitha Jeyakumar]

Hi Eimantas,

Currenltly, we are validating your reported query. we will update you the further details in two business days on or before 19th April 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Eimantas,


We have followed the steps you have shared to reproduce the reported issue in a mobile device. but, we didn't face any issues. we have also prepared a video illustration of issue validation in a mobile device. 

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog_Mob200286540

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DialogServer-1904286948

Can you please share us with the runnable issue reproducing sample and a video of issue replication steps to further validate on the issue.

Regards,

Vinitha

[Eimantas Baigys]

Hello, i'm trully sory misguidance, but the issue is with multiple dialogs. 

I am attaching zip with solution and short video to demonstrate it

Thank you

Attachment: DialogIssue_28b3c232.rar

[Vinitha Jeyakumar]

Hi Eimantas,

Currently, we are validating your reported query with high priority. we will update you the further details in two business days on or before 25th April 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Eimantas,

Your reported issue occurs because of the highest max-height value assigned to the dialog when rotating device from vertical to horizontal, the MaxHeight for the Dialog is calculated based on the target. If the target is not specified externally, the Dialog will consider the body as target and will calculate the MaxHeight based on it.

And the issue can be resolved by setting maximum height to the Dialog using the OnOpen event. please check the code below,

Code snippet:

<SfDialog @ref="SfDialog" @bind-Visible="Visible" IsModal="true" Width="@width" AllowDragging="true" ShowCloseIcon="true">

    @if (Model != null)

    {

        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>

        <DialogTemplates>

            <Header>

                Second

            </Header>

            <Content>

              . . .

                 . . .

            </Content>

        </DialogTemplates>

         <DialogEvents OnOpen="@DialogOpen"></DialogEvents>

        <DialogButtons>            

            <DialogButton Content="Submit" CssClass="e-danger col-4" />

        </DialogButtons>

    }

</SfDialog>

@code {

    private void DialogOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs  args)

    {

       

        args.MaxHeight  = "400px";

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DialogIssue1026404804

Regards,

Vinitha

[Michael]

Hi All,
I have a problem with the dialog on mobile, where if I use a fixed bootstrap nav bar, the dialog takes up the entire viewport, and the top of the dialog, where the buttons are, is hidden under the toolbar.

https://youtube.com/shorts/RBp9YDJAVZQ

This happens if I use <nav class="... fixed-top>

Is it possible to set the dialog height to 80vh

Michael

[Priyanka Karthikeyan]

Hi Michael,

We have branched the last query in this below forum. Please follow this forum for further updates.

https://www.syncfusion.com/forums/182313/how-to-change-the-scheduler-editor-window-height-in-mobile-mode-from-174289

Regards,

Priyanka K