Bug
Heights of headers in expansion panels are homogenous between tabs
Here's what I did:
mat-tab-group with at least 2 tabsmat-expansion-panel in each tab, with a mat-expansion-panel-header and mat-panel-title on eachSee attached Plunker: http://plnkr.co/edit/S73nzA?p=preview
These tabs should have consistent behavior according the material design standard
@angular/material 2.0.0-beta.12
Angular 4.4.6
Reproduced on Plunker and on Chrome
To further explain the issue:
Bug seems to be within mat-expansion-panel-header.
mat-expansion-panel-header within the first tab got height: 48px; applied to it.
mat-expansion-panel-header within the second tab didn't have height applied to it.
After expanding the mat-expansion-panel-header within the second tab the right style do get applied.
Updated original plunker by adding an expanded="true" attribute to the mat-expansion-panel to better illustrate the behavior.
These elements seem to behave normally when manually expanding and closing them, but not when they are first rendered.
Duplicate of https://github.com/angular/material2/issues/5269. See also workaround in the comments https://github.com/angular/material2/issues/5269#issuecomment-326692430 (note that *ngIf is also needed for 1 tab, not shown in example)
Closing as duplicate of #5269
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
_This action has been performed automatically by a bot._
Most helpful comment
To further explain the issue:
Bug seems to be within
mat-expansion-panel-header.mat-expansion-panel-headerwithin the first tab gotheight: 48px;applied to it.mat-expansion-panel-headerwithin the second tab didn't have height applied to it.After expanding the
mat-expansion-panel-headerwithin the second tab the right style do get applied.