Bug(Dialog): Dialog size is fixed and can't be changed

[cometaRobertillo]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16-

Description

Exist a property that make all dialogs appear at the same exact size at this class:

.cdk-overlay-pane.mat-mdc-dialog-panel
max-width: var(--mat-dialog-container-max-width, 80vw);

If you replace it with this at style.scss now it works fine and resize based on your elements
.cdk-overlay-pane.mat-mdc-dialog-panel {
max-width: 100% !important;
}

Reproduction

StackBlitz link: No link
Steps to reproduce:

1. use a dialog and try change your modal size using dialog config ex. width: '100%'

const dialogConfig: MatDialogConfig = {
hasBackdrop: true,
disableClose: true,
width: '100%'
};

At past versions it dosnt matter, resize based on your styles and structure.

Expected Behavior

Dialog resize based on component structure

Actual Behavior

Dialog size appear fixed and can't change base on component elements

Environment

• Angular: 18.0.3
• CDK/Material: 18.0.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[crisbeto]

You need to change the maxWidth in the dialog config, instead of the width.

[cometaRobertillo]

Thanx for your answer but no that dosnt work properly, the dialog didnt center correctly. Look

this is how it looks when you overwrite using this

.cdk-overlay-pane.mat-mdc-dialog-panel {
max-width: 100% !important;
}

and this is how it looks when you change maxWidth at the config.

same value 100% but didnt work well, the dialog get like left: 0 by default always when you use config. i recently update from v14 to 18

[omaximenco]

Not sure about v18 but in v19 you do need to specify maxWidth (and maxHeight if needed) otherwise it won't grow.
https://material.angular.io/components/dialog/api

dialog.open(ItemPickerComponent, {
width: '800px',
maxWidth: '100%',
data: ...

[noahknoppik]

For me setting minWidth in vw instead of % worked