MatDialog: controlling overall size regardless of content size

Question

Using MatBlazor (1.5.4) MatDialog, I'm interested in having the dialog size fixed or set to a percentage of the total page. Currently, the behaviour is that the dialog opens with its size fitting the content.

I tried adding explicit styling in different part of the dialog definition, without success.

<MatDialog @bind-IsOpen="@IsDialogOpen" Style="width: 600px; height:600px">
    <MatDialogTitle>Some title</MatDialogTitle>
    <MatDialogContent Style="width: 600px; height:600px">This is the content</MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@(() => this.IsDialogOpen = false)" Icon="close">Close</MatButton>
    </MatDialogActions>
</MatDialog>

@code
{
    private bool IsDialogOpen { get; set; }
}

It seems there is no explicit mechanism integrated into the MatDialog component thus I guess explcit styling/CSS is needed.

What would be a correct approach to control the dialog sizing?

Have you found an answer to this? I'm having the same dilemma. — Tomy, Jul 16 '20 at 15:11
@Tomy not yet no. I've changed my UI approach and used javascript for modal. It hurts when I look at it. — Askolein, Jul 17 '20 at 10:32

score 6 · Answer 1 · answered Oct 10 '19 at 20:12

By default, the surface dialog grows to fit the content up to a max-width of 560px.

@media (min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface { max-width: 560px; }
}

You should be able to override that with your own css file that loads after MatBlazor removing the max-width and setting the width value. If you want to do a percentage of the total screen you will also need to set your container to 100% width.

.mdc-dialog .mdc-dialog__container { width: 100%;}
.mdc-dialog .mdc-dialog__surface {
    max-width: none;
    width: 70%;
}

score 0 · Answer 2 · answered Sep 27 '20 at 18:06

I found that overriding the .mdc-dialog__surface messed with the behaviour of the @bind-IsOpen and it caused the dialog to always be open as a blank container? I opted to apply individual styling to the actual fields to make them wider as my issue was that the default text field size was smaller than its content and was not automatically re-sising.

MatDialog: controlling overall size regardless of content size

2 Answers2