components
components copied to clipboard
bug(Tabs): Attempt to center element
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
I was trying to center the mat-tab-group to display it in the center of the screen, but when switching between tabs the mat-tab buttons have visual glitches
Reproduction
Steps to reproduce: https://stackblitz.com/edit/angular-bhqlxj?file=src/app/tab-group-basic-example.html
https://user-images.githubusercontent.com/5487950/186261263-86d5e377-3540-4a25-b0f8-bf09ae561e83.mp4
Expected Behavior
The size of the buttons will be displayed correctly without having to resize the screen
Actual Behavior
It seems that it is not able to detect the current size of the buttons when being centered on a flex
Environment
Angular CLI: 14.1.3 Node: 18.7.0 (Unsupported) Package Manager: npm 8.15.1 OS: win32 x64
Angular: 14.1.3 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, material, platform-browser, platform-browser-dynamic ... router, service-worker
Package Version
@angular-devkit/architect 0.1401.3 @angular-devkit/build-angular 14.1.3 @angular-devkit/core 14.1.3 @angular-devkit/schematics 14.1.3 @angular/fire 7.4.1 @angular/flex-layout 14.0.0-beta.40 @schematics/angular 14.1.3 rxjs 7.5.6 typescript 4.7.4
This looks like an issue specifically when the tabs are nested inside of a mat-card
, because outside it works as expected.