Bug(Dialog): Dialog size is fixed and can't be changed
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
まず、Angular Material's MatDialogConfig の width 設定で問題を再現し、報告で説明されている .cdk-overlay-pane.mat-mdc-dialog-panel の max-width ルールを確認します。現在のダイアログのサイズ調整の挙動を以前のバージョンと比較します。設定された値とコンポーネントのコンテンツに応じてダイアログの幅が変化し、グローバルな !important オーバーライドを必要としなければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, css, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 58/100