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

[Ploppy3]

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

[Totati]

Hi, this is caused by .mat-slide-toggle .mat-slide-toggle-ripple that has 40px height, which is larger than the mat-slide-toggle's 24px. We overcome this problem by applying padding top/bottom to a the toggle, when it's first/last.

[Ploppy3]

@Totati Thank you for the workaround, I could not find the solution, much appreciated.

[crisbeto]

Looks like this will be a problem with the MDC slide toggle too. It may be tricky to get a fix merged in, because it can cause screenshot diff failures.

[nienow]

Just wanted to add that I ran into this issue with radio buttons as well, when they are at the bottom of the dialog content.

[Ploppy3]

@nienow Yes, it happens because radio buttons also have ripples.

[kyletanders]

Any update on this? This has been an annoyance for a long time. Would be nice to get it fixed.

[mpeguero]

Angular material 15: this solved the issue
// to fix the issue with the dialog scroll issue
.mdc-dialog__surface {
overflow-y: hidden !important;
}

[roma2341]

Its weird and unusable behavior

[DywiTom]

Similar to mat-checkbox. Workaround Material 3:

  mat-checkbox {
    --mat-checkbox-touch-target-display: none;
  }