Dialog slide in/out on mobile prevented by `!important`

Radzen Studio Blazor Server
1

Hi chaps,

Sorry I realise this is long-winded... just skip to the bottom.

In my app the user can have two dialogs open at a time.
The user wants to create an animation, so they open the animation dialog, whilst the animation is 'recording' they can open another dialog to edit the state of object, these edits are 'recorded' and when the user closes the animation dialog, the edits are committed.

Normally when the app is viewed on a non-mobile device, I have post-render JS to remove the overlay and make the dialog draggable... So therefore the user can have two dialogs open and rearrange them.

In mobile mode, I want to be able to animate the animation dialog -20vh top and hide it away and animate the other dialog 20vh top. (if you get the picture)

m-animation
m-animation474×835 26.8 KB

I am using 2.10.7 and humanistic-base.css, you have a !important CSS rule that is preventing me from animating the top on mobile:

@media (max-width: 768px) {
  .ui-dialog:not(.ui-confirmdialog) {
    width: 100% !important;
    top: 0px !important; }

Does the top need to be !important?
Does the width need to be !important?

Thanks

Luke

2

Yes. However you can edit the CSS file and remove those if you don't need them. Then include your local copy of the CSS file.

3

Hi,

Yes I see now why it is !important, but this is overriding the element style I give it and I will have to remember to remove those rules each time I upgrade.

What do you think about the idea of a ui-sized class?
Then the developer could diffine their own sizes and not have them overridden.

var opt = new DialogOptions()
{
    ShowTitle = false,
    Top = "-20vh",
    Height = "20vh",
    Width = "100%",
    Class = "ui-sized another-class"
};

@media (max-width: 768px) {
  .ui-dialog:not(.ui-confirmdialog):not(.ui-sized) {
    width: 100% !important;
    top: 0px !important; }
4

At the moment adding a custom css class to the dialog is not supported.