Components: md-expansion-panel-header has incorrect height when put into a mat-tab-group

Created on 26 Oct 2017  路  5Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Heights of headers in expansion panels are homogenous between tabs

What is the current behavior?

Here's what I did:

  • Create a mat-tab-group with at least 2 tabs
  • Place a mat-expansion-panel in each tab, with a mat-expansion-panel-header and mat-panel-title on each
    On the second tab, the title on the header is missing padding, while on the first tab, the padding is present.

What are the steps to reproduce?

See attached Plunker: http://plnkr.co/edit/S73nzA?p=preview

What is the use-case or motivation for changing an existing behavior?

These tabs should have consistent behavior according the material design standard

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/material 2.0.0-beta.12
Angular 4.4.6

Reproduced on Plunker and on Chrome

Is there anything else we should know?

Most helpful comment

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.

All 5 comments

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._

Was this page helpful?
0 / 5 - 0 ratings