angular / angular/components

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

Ouverte
#29,384 7 commentaires 10 réactions 0 personnes assignées Voir sur GitHub
area: material/dialog P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [X] 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème avec le paramètre width de Angular Material's MatDialogConfig et examinez la règle max-width de .cdk-overlay-pane.mat-mdc-dialog-panel décrite dans le rapport. Comparez le comportement actuel de dimensionnement de la boîte de dialogue avec celui de la version précédente ; le travail est considéré comme terminé lorsque la largeur de la boîte de dialogue répond à la valeur configurée et au contenu du composant sans nécessiter de surcharge globale avec !important.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, css, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
58/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.