angular / angular/components

bug(mat-dialog): mat-dialog-content always has a scroll bar when there is a element with ripple overflowing inside

Open
#20,344 10 comments 6 reactions 0 assignees View on GitHub
area: material/checkbox area: material/slide-toggle P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

Steps to reproduce:
put a mat-slide-toggle in a mat-dialog-content

https://stackblitz.com/edit/angular-pt8j22?file=src/app/dialog-content-example-dialog.html

**EDIT: same goes for checkboxes**

#### Expected Behavior
there should not be a scroll bar when having a mat-slide-toggle in a mat-dialog-content if the content does not exceed the max height allowed

#### Actual Behavior
mat-dialog-content always has a scroll bar when there is a mat-slide-toggle inside it

#### Environment

- Angular: 10
- CDK/Material: 10
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, specifically src/app/dialog-content-example-dialog.html, and run the dialog containing a mat-slide-toggle or checkbox. Compare mat-dialog-content with and without the overflowing ripple element; done means the dialog has no scrollbar when its content stays within the allowed height.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.