Button - touch height

[leomayer]

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

No response

Description

The height of the touch-target for buttons is fixed with 48px. If the corresponding button has the standard-height of 48px than this is fine. With reducing e.g. the denisity the 48px shrink to e.g. 36px. Therefore the height should rather inherit the height from the button instead of its own fixed height.

The main problem is that the surrounding layout container calculates the height of the button as 36px. The button don't fit into and an overflow appears.

Reproduction

The provided sample container could be adjusted with the proper css attributes. Nevertheless the problem persists in some other configurations especially when the minimal height is calculated wrongly.

https://stackblitz.com/edit/nxq1bh?file=src/app/button-overview-example.css

Expected Behavior

.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: inherit; /* <=================== */
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

Actual Behavior

.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: 48px;  /* <=================== */
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.0.2
Node: 20.1.0 (Unsupported)
Package Manager: npm 9.6.4
OS: linux x64

Angular: 16.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1600.2
@angular-devkit/build-angular      16.0.2
@angular-devkit/core               16.0.2
@angular-devkit/schematics         16.0.2
@angular/cdk                       16.0.1
@angular/material                  16.0.1
@angular/material-moment-adapter   16.0.1
@schematics/angular                16.0.2
typescript                         4.9.5

[LittleSaya]

This happens to me when I put a button as footer inside a dialog, there is always a y-scrollbar

[Renji-FR]

What is the status of this issue? I have the same behavior.

I tried to set --mdc-icon-button-state-layer-size to the right height but the touch-target height stays to 48px.

[mohammedsahl]

This happens to me when I put a button as footer inside a dialog, there is always a y-scrollbar

Likewise :(

For now I've decided to unset the height using

:host .footer,
mat-dialog-actions {
  ::ng-deep span.mat-mdc-button-touch-target {
    height: unset;
  }
}

Pros: No scrollbar

Cons: Uses the hotly debated ng-deep. Slightly less accessible

[devAnky]

This is still an issue in version 17.3!

[FlepTheFlabbergasted]

Still an issue as well!

[arthurfaby]

Up :)

[hikarii-flow]

Happens when you put a button in a mat-tab as well. Unsetting the height fixes the issue for now...

[roma2341]

Buttons are broken, they always make my parent think that it's overflowing..

[EvanLin1704]

I'll provide a method — if you upgrade to version 19 or above, you can use the styling feature.
HTML
<button mat-raised-button class="cus-button"> Test </button>
SCSS

@use '@angular/material' as mat;
.cus-button {
  @include mat.button-overrides((
    protected-touch-target-display: none,
  ));
}