question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Hidden tabs don't render expansion panels correctly

See original GitHub issue

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

A <md-expansion-panel [expanded]="false"> should not be expanded until explicitally opened. When inside a hidden tab, .mat-expansion-panel-content should have height : 0px

What is the current behavior?

Panel is collapsed but panetl’s content is visible. Problem occurs only if the accordion is in a hidden tab of a tab-group.

What are the steps to reproduce?

http://plnkr.co/edit/q6kXPH?p=preview

  <md-tab label="Working">
    <md-accordion>
        <md-expansion-panel [expanded]="false">
        <md-expansion-panel-header>
          You should see me
        </md-expansion-panel-header>
        <p>Yous should not see me</p>
      </md-expansion-panel>
    </md-accordion>
  </md-tab>
  <md-tab label="Not working">
    <md-accordion>
        <md-expansion-panel [expanded]="false">
        <md-expansion-panel-header>
          You should see me
        </md-expansion-panel-header>
        <p>Yous should not see me</p>
      </md-expansion-panel>
    </md-accordion>
  </md-tab>
</md-tab-group>

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

Material2 master Angular 4.2.3

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:59
  • Comments:108 (18 by maintainers)

github_iconTop GitHub Comments

71reactions
lulacommented, Sep 1, 2017

Hello! @julianobrasil, following @lebeker advice that’s working for me as a workaround:

<md-tab-group [(selectedIndex)]="selectedTabIndex">
  <md-tab label="First">
    <div>...</div>
  </md-tab>
  <md-tab label="Second">
    <div *ngIf="selectedTabIndex == 1">...</div>
  <md-tab>
  <md-tab label="Third">
    <div *ngIf="selectedTabIndex == 2">...</div>
  <md-tab>
</md-tab-group>
47reactions
bastienlemaitrecommented, Sep 12, 2017

Or use css ? It worked for me ! 😃

div.mat-expansion-panel-content:not(.mat-expanded) {
    height: 0px !important;
    visibility: hidden !important;
}

.mat-expansion-panel-header  {
    height: 48px;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Tabs Hidden Tabs Dont Render Expansion Panels Correctly ...
https://github.com/angular/material2/issues/5269 example.
Read more >
[Tabs] Hidden tabs don't render expansion panels correctly
A <md-expansion-panel [expanded]="false"> should not be expanded until explicitally opened. ... What is the current behavior? Panel is collapsed but panetl's ...
Read more >
Is mat-expansion-panel lazy rendering broken? - Stack Overflow
The problem is all about *ngIf. First time its not able to make it true. that's why I am setting it true using...
Read more >
Tabs, panels, or other controls are missing from the ribbon in ...
The profile may not have the ribbon tab or panel that is needed whereas another profile will. This is particularly important in AutoCAD...
Read more >
Tabs | Components - BootstrapVue
To provide a better user experience with bottom placed controls, ensure that the content of each tab pane is the same height and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found