[Tabs] Hidden tabs don't render expansion panels correctly
See original GitHub issueBug, 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:
- Created 6 years ago
- Reactions:59
- Comments:108 (18 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hello! @julianobrasil, following @lebeker advice that’s working for me as a workaround:
Or use css ? It worked for me ! 😃