How to drag a dialog box regardless of what else is on the screen.

[Clive Gray]

I copied the following example of how to make a dialog box draggable from the Syncfusion documentation:

@page "/DialogTest"
@rendermode InteractiveServer
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

    <SfDialog Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">
        <DialogTemplates>
            <Header> Dialog </Header>
            <Content> This is a Dialog with drag enabled </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
            <DialogButton Content="Cancel" OnClick="@CloseDialog" />
        </DialogButtons>
    </SfDialog>
</div>

<style>
    #target {
        min-height: 400px;
        height: 100%;
        position: relative;
    }
</style>

@code {
    private bool IsVisible { get; set; } = false;
    private void OpenDialog()
    {
        this.IsVisible = true;
    }
    private void CloseDialog()
    {
        this.IsVisible = false;
    }
}

It works fine of course but the dialog box can only be dragged within a certain area defined by #target (about 400 pixels wide).

Whereas I have a page with Bootstrap rows and columns and my dialog box can only be dragged within very unexpected bounds indeed.

What I need is a dialog box which appears in the middle of the screen and can be dragged anywhere, regardless of what rows or columns are "underneath" it.

Any advice on how that can be done would be extremely useful.

Many thanks,

[Yohapuja Selvakumaran]

Hi Clive Gray,

Thank you for bringing this issue to our attention. We have carefully validated the behavior you reported with the Dialog component, both with and without the target property.

To clarify, when the target property is set for the Dialog, the Dialog will be draggable only within the specified target area. However, if no target is set, the Dialog is appended to the body of the document, allowing it to be dragged freely within the entire window.

If your requirement is to allow the Dialog to be draggable across the whole page, we recommend removing the target property from the Dialog. This will enable dragging within the full window since the Dialog will be appended to the body.

Here’s an example code snippet:

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

 

<div id="target">

    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

 

    <SfDialog Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">

        <DialogTemplates>

            <Header> Dialog </Header>

            <Content> This is a Dialog with drag enabled </Content>

        </DialogTemplates>

        <DialogButtons>

            <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />

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

        </DialogButtons>

    </SfDialog>

</div>

 

<style>

    #target {

        min-height: 400px;

        height: 100%;

        position: relative;

    }

</style>

 

@code {

    private bool IsVisible { get; set; } = false;

    private void OpenDialog()

    {

        this.IsVisible = true;

    }

    private void CloseDialog()

    {

        this.IsVisible = false;

    }

}

For your convenience, we’ve prepared a sample demonstrating this behavior. You can explore it using the following link:

Sample:  https://blazorplayground.syncfusion.com/htVpXlVqgvkwMaSD

We hope this clarifies the functionality, but if you have any further questions or need additional assistance, please don’t hesitate to ask.

Regards,

Yohapuja S

[Clive Gray]

Hi Yohapuja,

Thanks very much for getting back to me so quickly.

But I'm afraid I couldn't get your sample to work as desired. I even tried the BlazorPlayGround link you provided.

I couldn't move the dialog below about 400 pixels down the screen.

I suppose I would like to know how to have a dialog be able to be dragged around the full screen, as if it floating above - and unaffected by - anything else on the screen - and more importantly resized as required.

Thanks in advance,

[Yohapuja Selvakumaran]

Hi Clive Gray,

Thank you for your prompt feedback. We are sorry to hear that the provided solution didn’t work as expected.

The issue you’re encountering is likely due to the minimum height set on the target element. This can limit the draggable area of the dialog, preventing it from moving freely across the entire screen. To resolve this, we suggest increasing the ‘min-height’ of the target element, which should allow the dialog to be dragged further down the screen.

Here’s an updated example:

 

<div id="target">

    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

 

    <SfDialog Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">

        <DialogTemplates>

            <Header> Dialog </Header>

            <Content> This is a Dialog with drag enabled </Content>

        </DialogTemplates>

        <DialogButtons>

            <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />

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

        </DialogButtons>

    </SfDialog>

</div>

 

<style>

    #target {

        min-height: 1000px;

        height: 100%;

        position: relative;

    }

</style>

 

 

 

This should allow the dialog to move more freely, but if you're looking for the dialog to be completely independent of any restrictions and to be draggable and resizable across the entire screen, you might consider not setting any specific target or container for the dialog, allowing it to float above the entire screen.

Please try this out and let us know if it resolves the issue. If you need any further assistance or adjustments, feel free to reach out. We’re here to help.

Thanks again for your patience and understanding.

Regards,

Yohapuja S