How to prevent Dialog control from shifting due to Scrollbars

[DD]

Hi,

I'm trying to use a Dialog to replace Bootstrap 5.3 modals and am running into a very annoying issue.

When the dialog opens, the scrollbar disappears which causes issues with the background.

This was easily fixed by doing the following css:

    .e-dlg-target.e-scroll-disabled {

        overflow: hidden !important;

        padding-right: 16px;

    }

However, when the Dialog closes, this shifts across to the left because the scrollbar shows up again before the whole Dialog has finished closing.

Is there any way to do any of the following:

1) Continue to display the scrollbar behind the Dialog but keep it disabled so background scrolling can't take place.

or

2) Have the scrollbar show up only AFTER the Dialog has been completely removed - i.e. after the background modal fades away.

This is a very annoying issue which makes the screen jump so would be great to get it resolved.

Also, whats the best way to make the animations look as similar to bootstrap 5.3 as possible? Such as fading in and out and also fading in from the top and out from the top?

Thanks

[Priyanka Karthikeyan]

Hi DD,

 

To prevent the Dialog control from shifting due to scrollbars when using it to replace Bootstrap 5.3 modals, you can use the following approach. This will ensure that the scrollbar remains visible behind the Dialog but keeps background scrolling disabled, or have the scrollbar show up only after the Dialog has been completely removed.

You can achieve this by using the BeforeOpen and BeforeClose events of the Dialog control to manage the scrollbar behavior. 

And To make the animations of the ASP.NET Core Dialog control look similar to Bootstrap 5.3, such as fading in and out and also fading in from the top and out from the top, you can use the animationSettings property of the Dialog control. Here is an example of how you can achieve this:

Here is a sample implementation:

​<div id='container' style="height:400px;">
    <ejs-button id="targetbutton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog"  showCloseIcon="true" header="Sign In" beforeOpen="onBeforeOpen" beforeClose="onBeforeClose" target="#container" width="300px">
       ....
        <e-dialog-animationsettings effect="FadeZoom" duration="400" delay="0"></e-dialog-animationsettings>
    </ejs-dialog>
</div>

<script>
    document.getElementById('targetbutton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
    };

    function onBeforeOpen() {
        document.body.classList.add('e-scroll-disabled');
    }

    function onBeforeClose() {
        document.body.classList.remove('e-scroll-disabled');
    }

    function dlgButtonClick() {
        var dialog = document.getElementById('dialog').ej2_instances[0];
        dialog.hide();
    }
</script>

<style>
    .e-scroll-disabled {
        overflow: hidden !important;
        padding-right: 16px;
    }
</style>

 

Documentation Reference: https://ej2.syncfusion.com/aspnetcore/documentation/dialog/animation

Regards,

Priyanka K

Attachment: SyncfusionWebApplication2_37aeffc7.zip

[DD]

Hi Priyanka,

Thanks for sending through the test solution.

I've tried it and can confirm that what you've done works - HOWEVER - when the setting "isModal" is turned on, the issue still appears.

When the modal appears the background goes dark as expected but then the content is shifted across to the right (as the scrollbar disappears). And when the modal is closed, the content shifts back to the left (as the scrollbar reappears).

Is there any way to fix this?

You can update your example like this to reproduce the issue:

    <ejs-dialog id="dialog" isModal="true" showCloseIcon="true" header="Sign In" beforeOpen="onBeforeOpen" beforeClose="onBeforeClose" target="#container" width="300px">

You can see it most visible when you remove the animation (also is there any way to have the animation fade in from the top instead of zooming into view from the middle of the screen?)

Also another thing I noted on the example you sent, when you have the isModal option set, the screen seems to jump up to the middle of the page before the modal shows up. Is there any way to just have the modal open up where you're currently at?

You'll understand what I mean when you set the isModal as true on the test solution you sent above and load the screen - it'll be at the middle of the screen. When you close the modal, scroll down to open the modal again, it'll jump to the middle again, then when you close it this time, it'll ju

[Priyanka Karthikeyan]

Hi DD,

 

To prevent the page from scrolling when opening the modal dialog, we recommend setting the dialog's target as the body. In Syncfusion's Dialog component, the default target is set to the body, so if no target is specified, the body will be used automatically. Therefore, please remove the existing target (target="#dialogTarget") from your sample.

Additionally, to achieve an animation effect where the dialog fades in from the top, rather than zooming in from the middle of the screen, you can use Syncfusion's "Slide Top" animation effect. Below is an example demonstrating how to implement this animation:

 

 

<ejs-dialog id="dialog" isModal="true" showCloseIcon="true" header="Sign In" beforeOpen="onBeforeOpen" beforeClose="onBeforeClose"  width="300px">
      ...
        <e-dialog-animationsettings effect="SlideTop" duration="400" delay="0"></e-dialog-animationsettings>
    </ejs-dialog>

 

If you find that this approach doesn't fully meet your requirements or if you have any additional questions or need further assistance, please don't hesitate to reach out to us. We are here to help and provide further guidance as needed.

 

Regards,

Priyanka K

Attachment: SyncfusionWebApplication_83c47bc5.zip

[DD]

Hi Priyanka,

Thanks for the update.

As you can see in your animation gif, the issue is still present.

You can see the scrollbar shows up as soon as the dialog is closed which pushes everything to the left.

Is there any way to stop the scrollbar showing up UNTIL the modal background disappears?

That would most likely solve this issue.

Thanks

[Priyanka Karthikeyan]

Hi DD,

Thank you for your patience. We have considered this issue "Scrollbar shows up as soon as the modal dialog is closed" as a bug from our end, and the fix for the issue will be included on November first weekly patch release.

 

You can now track the status of the feedback through the below link,

 

Feedback link:https://www.syncfusion.com/feedback/62294/scrollbar-shows-up-as-soon-as-the-modal-dialog-is-closed

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

Priyanka K

[DD]

Great, thanks for the update Priyanka, was about to check in to see what was happening with this.

Will wait for the updated verison to be released and try again.

Tha

[Priyanka Karthikeyan]

Hi DD,

 

We’re pleased to inform you that the reported issue "Scrollbar shows up as soon as the modal dialog is closed" has been addressed in our latest release, version 27.1.58. To resolve this issue, we recommend updating your package to this latest version.

 

Release notes: https://ej2.syncfusion.com/aspnetcore/documentation/release-notes/27.1.58?type=all#dialog

 

Root cause: Before completing the dialog hide method, remove the `e-dialog-target` and `e-scroll-disabled` classes from the target element. This leads to the reported issue.

 

Regards,

Priyanka K