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

[roesselman]

Is this a regression?

• 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
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

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

[andrewseguin]

This is due to the inner touch target element being a larger size than it's container, causing the dialog content to be a height shorter than it should be. A workaround is to add a margin-bottom: 4px to the button. The fix would need some thought since the button is supposed to have a 40px height visually and layout-wise, but for accessibility reasons it needs to be a minimum of 48px.

[elbarea]

Hi, any updates on this? I can confirm the issue still persists, and it wasn't straightforward to find this thread—took me a while to track it down.

[prezzler]

I can confirm this issue also occurs in my project, but not only when the mat-button is the last child in a dialog.

In my case, the mat-button is at the end of a regular component template (not inside a dialog), and placing it as the last child of a scrollable container (for example, inside a flex column or a mat-card) also causes an unwanted vertical scrollbar to appear.

Setup in my case:

• Angular Material v18
• The button is inside a scrollable container (not a dialog), for example:

  <div class="content-wrapper">
    <!-- ...other content... -->
    <button mat-button>Scroll to top</button>
  </div>

• As soon as the button is the last child, a vertical scrollbar appears, even if there is enough space.

This suggests the issue is not limited to dialogs, but can also occur in other layouts where a mat-button is the last child of a container.

Workaround:
Adding margin-bottom: 4px to the button also works for me, but it feels more like a hack than a real solution.

Would appreciate an update or a more general fix, as this affects layouts