How to prevent Dialog width from changing when animating into view.

[Dylan Davenport]

I am currently using the Dialog component as a child component where the dialog to be rendered depends on what link is clicked. The dialog itself displays correctly on click, my problem is that when one dialog goes to close and another opens the width of both dialogs is changed. How can I ensure that the dialogs maintain their width when animating in and out of view? Currently the width is set on the SF Dialog component as shown in the docs and I do not have any CSS overriding the width.

Attachment: SF_Dialog_Issue_5212021_16e3a16c.zip

[Revanth Krishnan]

Hi Dylan, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How to prevent Dialog width from changing when animating into view?” 

 

We tried to reproduce the issue by making the sample using the ‘DialogComponent’ code snippet, but we are not able to make the sample with your certain use case with the shared code. 

 

So can you please share with us the below details? 

• The code snippet of the main page where the dialog is used as a child component with 3 links.
• The Syncfusion package version used in the application.
• The video illustration of the issue reproduced in the sample.
• If possible please share us with the issue reproducible sample.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Dylan Davenport]

Please find attached the 2 files which utilize the Dialog Component. Index.razor is the parent component and DialogComponent.razor is the child SyncFusion component. There is also a video recording of the issue. When the Dialogs swap out their widths get reduced (seems to be about 50% or so). I'm not sure if it is a CSS issue or what.

SyncFusion version - 18.4.0.47

Attachment: DialogComponent_Sample_Files_5242021_572d2f4c.zip

[Dylan Davenport]

I managed to get the Dialog width to not change by changing the .e-dialog class to position: absolute; However this causes other issues so I would rather not take this approach. Is there another way to achieve this?

[Revanth Krishnan]

Hi Dylan, 

 

 

Good day to you. 

 

 

We have further validated your query with the shared code snippet and we are able to reproduce the issue from our end. This issue occurred because of changing the default ‘position: absolute’ style of the dialog to ‘relative’. 

 

The below are the possible solutions for resolving the issue, 

 

Solution: 1 

Removing the overridden styles ‘position: relative’ will resolve the issue, also the other issue like dialog height not working properly after removing the position styles can be resolved by setting the ‘MinHeight’ property of the dialog. 

 

Code Snippet: 

Index.razor 

<style> 

    . . . 

    /* Dialog styles */ 

    .e-dialog { 

        z-index: 1001; 

        position: relative; 

    } 

 

    .e-dialog .e-dlg-header-content { 

        border: 0; 

    } 

 

    /* END dialog styles */ 

    . . . 

</style> 

 

DialogComponent.razor 

<SfDialog @ref="DialogObj" Visible=@(SelectedDialog == CurrentDialog) Height="500px" Width="75%" MinHeight="500px" Target="#dialog-container" ShowCloseIcon="true"> 

    . . . 

</SfDialog> 

 

Solution 2: 

Else, the ‘d-flex’ class in the dialog-container element can be removed to resolve the reported issue. 

 

<div id="dialog-container" class="col-10 d-flex justify-content-center"> 

    <!-- EMC Dialog --> 

    <DialogComponent @ref="Dialog" CurrentDialog="@((int)toolOptions.EMC)" SelectedDialog="@((int)selectedDialog)"> 

        . . . 

    </DialogComponent> 

    . . . 

    . . . 

</div> 

  

We have prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog_Blazor_Application-512689573 

 

Please check the above code snippets and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth 

 

[Dylan Davenport]

Thank you for your response. I had set the positioning to relative because if set to absolute the Dialog is outside of the document flow and does not position itself inside of the Target container. If I set the height of the Target container the Dialog component then loses hte ability to pushes the content back up when closed Also if I remove the display flex from the Dialog, when I close one Dialog and open another the Dialog that animates in appears underneath the leaving Dialog. This does not make for a good user experience in my opinion since the second Dialog pushes the content further down the page.

With that being said I starting to think the only option I have would be to toggle the position from relative to absolute when showing/hiding the Dialogs. Thoughts?

[Revanth Krishnan]

Hi Dylan, 

 

 

We have further validated your query and the issue can be resolved by following the below steps, 

 

• By adding the styles ‘position’ as ‘absolute’ and setting the height for the container element in the ‘Opened’ event of the dialog
• Then removing the styles ‘position’ as ‘absolute’ for all the dialog and then removing the style height for the container element in the ‘OnClose’ event of the dialog, only when closed by ‘Close Icon’.
• The setting and removing styles to the element can be achieved by the JsInterop concept.

 

We have prepared a sample for your reference, 

 

Code Snippet: 

_Host.cshtml 

<head> 

    . . . 

    <script src="~/jsinterop.js"></script> 

</head> 

 

jsinterop.js 

window.Dialog = { 

    // To set the position and height 

    setStyles: function (dialogId) { 

        var dialogElm = document.getElementById(dialogId); 

        dialogElm.style.position = "absolute"; 

        document.querySelector(dialogElm.blazor__instance.target).style.height = "500px"; 

    }, 

    // To remove the position and height 

    removeStyles: function (dialogId) { 

        var dialog = document.getElementById(dialogId); 

        var dialogTarget = document.querySelector(dialog.blazor__instance.target); 

        var allDialog = dialogTarget.querySelectorAll('.e-dialog'); 

        for (var i = 0; i < allDialog.length; i++) { 

            allDialog[i].style.removeProperty("position"); 

        } 

        dialogTarget.style.removeProperty("height"); 

    } 

} 

 

DialogComponent: 

<SfDialog @ref="DialogObj" Visible=@(SelectedDialog == CurrentDialog) Height="500px" Width="75%" Target="#dialog-container" ShowCloseIcon="true"> 

    . . . 

    <DialogEvents OnOpen="@ShowDialog" Opened="@DialogOpened" OnClose="@OnDialogClose"></DialogEvents> 

    <DialogAnimationSettings Effect="@AnimationEffect" Duration=600 /> 

</SfDialog> 

 

@code { 

    [Inject] 

    IJSRuntime JsRuntime { get; set; } 

    . . . 

    public async Task DialogOpened() 

    { 

        //To set the style for the element. 

        await JsRuntime.InvokeAsync<string>("Dialog.setStyles", this.DialogObj.ID); 

    } 

 

    public async Task OnDialogClose(BeforeCloseEventArgs args) 

    { 

        //To remove the style for the element only when closed using the close icon. 

        if (args.ClosedBy == "Close Icon") 

        { 

            await JsRuntime.InvokeAsync<string>("Dialog.removeStyles", this.DialogObj.ID); 

        } 

    } 

} 

 

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

 

Please check the above code snippets and the sample and let us know if it resolves your issue. 

 

Regards, 

Revanth