RadzenDialog Mobile

Radzen.Blazor Components
1

Greetings,
I'm tinkering with the RadzenDialog responsiveness
What happens is that when the page is in desktop view the dialog is perfectly placed in the page, but when i resize the page to mobile sizes the dialog is odly placed in the top of the page, and a part of it even "disapears" into the "void"
I'm wondering how I could fix this so I could display the whole dialog

This is the desktop view

image
image753×923 25.9 KB

This is the Mobile view

image
image498×908 16.9 KB

1 Like
2

Hi @Pedro_Horta,

This is due to the Dialog's responsive styles. You can use the following styles to disable it.

@media (max-width: 768px) {
    .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        inset-block-start: initial !important;
    }
}

Perhaps, we should consider the introduction of a Responsive property.

3

Thanks for your help!
It seems like RadzenDialogs CSS file has set:

inset-block-start: 0px !important;

Which with the '!important' it is way harder to override.
Adding to that, RadzenDialogs have always been dificult for me to correctly center in my App, so what I've been doing is

.rz-dialog {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}

It happens so, that was also contributing for the issue, once I've

.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
inset-block-start: auto !important;
width: 90% !important;
transform: translate(0%, 0%) !important;
left:0px !important;
}

It just was that much easier to manipulate!

On a final note, please reconsider the responsive visual of some components, since smartphones are widely used nowadays.

Thank you once again!

4

I understand the problem and why it is, but i dont know how i should override/where i should paste:

Because under page.razor.css it doesnt help, under dialog.razor.css too. ...

5

OK, i just made it with this in the MainLayout.razor File:

<style>
  :root {
    --rz-primary: black;
    --rz-secondary-lighter: grey;
    --rz-link-color: #333333;
    --rz-link-hover-color: grey;
    --rz-primary-lighter: grey;
    --rz-grid-selected-color: #333333;
  }

  .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
    inset-block-start: initial !important;
  }
</style>

The @media block wasnt recognized so i just left it.