angular / angular/components

bug(Material 3 > Button): When button is last child element in mat-dialog-content it causes a vertical scrollbar to appear

オープン
#29,164 コメント 3 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: material/button P3
主要言語
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

v17 (Material 2)

### Description

When button is last child element in mat-dialog-content it causes a vertical scrollbar to appear.

### Reproduction

StackBlitz [link](https://stackblitz.com/edit/stackblitz-starters-1giu8v?file=src%2Fapp%2Fdialog%2Fdialog.component.html)
Steps to reproduce:
1. Create Angular v18 project + add Angular material v18
2. Create a dialog component
3. In dialog component: Add a mat-button in mat-dialog-content
4. Open dialog

![Screenshot 2024-05-31 154547](https://github.com/angular/components/assets/5632697/bc64c43c-4ee1-46a6-a665-fc056a397d87)

### Expected Behavior

There should be no vertical scrollbar in the dialog

### Actual Behavior

There is a vertical scroll bar in the dialog

### Environment

- Angular: "@angular/core": "18.0.0"
- CDK/Material: "@angular/material": "18.0.0"
- Browser(s): Edge
- Operating System: Windows

Angular CLI: 18.0.0
Node: 22.2.0
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 18.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-luxon-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.0
@angular-devkit/build-angular 18.0.0
@angular-devkit/core 18.0.0
@angular-devkit/schematics 18.0.0
@schematics/angular 18.0.0
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.6

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされている StackBlitz の再現から始め、mat-dialog-content の最後の子としてボタンを含む Angular 18 Material ダイアログのスクロールバーを確認します。関係する dialog-content と Material button のスタイルを追跡します。完了の条件は、再現したダイアログに不要な垂直スクロールバーがなく、あふれたコンテンツに対して期待されるスクロールが維持されていることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。