Matblazor: Question: How to increase the size of MatDialog

Created on 10 May 2020  路  4Comments  路  Source: SamProf/MatBlazor

How can I increase the overall size (width and height) of MatDialog ? Its always rendering with a fixed size even though if I specify the heigh and width for MatDialog in the style attribute.

https://www.matblazor.com/Dialog

Thanks for your help!

Most helpful comment

I don't think it can be done without overriding some MDC classes.
This is how I do it.

.large {
    .mdc-dialog__surface {
        min-width: 80vw !important;
    }
}

.medium {
    .mdc-dialog__surface {
        min-width: 60vw !important;
    }
}

All 4 comments

I don't think it can be done without overriding some MDC classes.
This is how I do it.

.large {
    .mdc-dialog__surface {
        min-width: 80vw !important;
    }
}

.medium {
    .mdc-dialog__surface {
        min-width: 60vw !important;
    }
}

I am pretty new to UI Development, however I wrote a sweet blazor application and everything was going good until I update to MatBlazor 2.6.0 and now my dialogs are small again. I have added the above lines to the site.css but it seems it has no effect.
I previously had
.mdc-dialog .mdc-dialog__container {
width: 100%;
}

.mdc-dialog .mdc-dialog__surface {
max-width: none;
width: 100%;
}
Which was working fine, does it still use the site.css? Any help would be awesome thanks!

Try adding '!important' to your css rules.

Well that was it!!
I replaced the above with...

.mdc-dialog .mdc-dialog__surface {
max-width: none !important;
}

Was this page helpful?
0 / 5 - 0 ratings