Button - touch height
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione StackBlitz in src/app/button-overview-example.css e cerca nel codice sorgente di Angular Material il selettore .mat-mdc-button-touch-target. Confronta le altezze calcolate del pulsante e dell’area touch con una densità ridotta, quindi verifica che il layout circostante non vada più in overflow e che l’area touch segua l’altezza del pulsante.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, css, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 48/100