Dialog does not close

I use a dialog and when I want to close it with the "x" in the top-right corner it just jump a bit right or it is closed and open a new one. I do not understand because the Close button works.

Hi @hatvanis,

Seems to work as expected on our online demo. What is different in your case?

Hi korchev,
I call dialog:
var data = await DialogService.OpenAsync($"Title",
null, new DialogOptions() { Width = "700px", Height = "700px", Resizable = true, Draggable = true });

Then I use a base dialog component when I load dynamically some forms:
public partial class PartnerManage : ComponentBase
public Radzen.DialogService DialogService { get; set; }

public IPartnerHttpRepository PartnerRepo { get; set; }
public PartnerDto Partner { get; set; }

protected override async Task OnInitializedAsync()
    Partner = await PartnerRepo.GetPartnerCreationData();

void Submit(PartnerDto arg)

void Cancel()


The first dialog in our demo has both Resizable and Draggable set to true and the close button seems to work as expected. Make sure you are using an up to date version of Radzen.Blazor.

I use the recent version 3.20.11.
I checked that the dialog possibly reopen after closing it but doesn't. What I noticed, if I click anywhere on the header of the dialog it jumps a bit to the right.
I use your demo and I try to find the difference.

When I took out the Draggable = true parameter from

await DialogService.OpenAsync($"Új partner rögztése",
new Dictionary<string, object>(),
new DialogOptions() { Width = "700px", Height = "700px", Resizable = true });

the problem goes away.

Hello, I'm also experiencing something similar, when clicking on the dialog header area, the entire element shifts to the right by about 10 pixels. This behavior prevents clicking X to close.

As @hatvanis mentioned, the issue is not a concern on Draggable = false.

I just updated to the most latest version of Radzen.Blazor.

Video evidence:


Make sure the <RadzenDialog /> tag is placed before everything else and not nested anywhere in your layout.

<RadzenDialog /> as the first element:

But unfortunately the problem has not gone away.

I'm just disabling Draggable = false for now

Began experiencing the dialog jumping a few pixels to the right recently. I've set Draggable = false for now.

1 Like

I have the same issue. Did you ever fix it?

No, I've disabled draggable for now as that stops the problem and that was more important in my case. I hope to return to try and diagnose what's going on at some point.

I ended up creating a div with a button in it and just replacing it.

   <p class="mb-4">Select a Request to Link to</p>
    <div style="position: absolute;
        top:5px; left:640px">
        <RadzenButton Text="X" Click="() => ds.Close(false)" Style="float:right;margin-bottom:50px" ButtonStyle="ButtonStyle.Secondary" Class="mr-1" />

For what it's worth, I hit this issue, and it turned out to be solveable by moving <RadzenDialog /> earlier in the page, as @korchev suggested.

I was using Blazor Components embedded in Razor Pages, following roughly what this blog post suggested: Integrating Blazor components into Razor Pages and MVC apps - Meziantou's blog

What I found was that putting the <RadzenDialog /> at the start of my MainLayout.razor was not enough, since it was still wrapped in my _Layout.cshtml. Ultimately what I did was add the following to the top of my _Layout.cshtml instead:


I solved this by modifying my MainLayout.razor file by moving the RadzenComponents element from inside the article element after the @body, to the outside div element just after the main element. Please see image below on the final fix.