Blazor Responsive Dialog

Radzen Studio Blazor Server
1

Hi, how do I make my radzen dialog responsive?
Thank you!

2

Hi @Rancov_Miroslav,

Can you elaborate? What would you like to achieve?

3

Hi, this is my code Width = "700px", Height = "430px", Left = "calc(50% - 350px)", Top = "calc(50% - 265px)".
On desktop is okay, but when I'm on mobile the with is to long and the dialog is to much to the left. I manage to make some custom css around the dialog, but then all the dialogs will be the same, same width same height, and I dont want this. Every dialog should have it's own size, but to be responsive. I hope you understand what I'm asking. Thank you!

4

The Width and Height render as inline style. One possible solution is to use CSS media queries and override the width and height of all dialogs globally e.g.:

@media (max-width: 768px) {
  .ui-dialog {
      width: 100% !important;
      height: 50% !important;
   }
}

A second solution is to set the Width and Height from JavaScript depending on the device size.