CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular-material2
Tarun Patel
Tarun Patel

Reputation: 253

Angular Material : nested expansion panels spill-over when closed

I have a requirement to load expansion panels in a nested mode. Where each of the expansion panels has a sub-panel and each of those might, in turn, have similar ones. eg: 

<!--pseudo-code below-->
<mat-accordion>
  <mat-expansion-panel> Level-1 
    <mat-accordion>
        <mat-expansion-panel>Level-2
            <mat-accordion>
                <mat-expansion-panel>Level-3
                </mat-expansion-panel>
                <mat-expansion-panel>Level-3
                </mat-expansion-panel>
            </mat-accordion>
        </mat-expansion-panel>
        <mat-expansion-panel>
        </mat-expansion-panel>
     </mat-accordion>
    </mat-expansion-panel>
    <mat-expansion-panel> Level-1
    </mat-expansion-panel>
  </mat-accordion>

In this case when a panels panels till level-3 are expanded and if I click on the header of a panel at level-1 the level-1 panel closes, however, the level-3 panel still appears on the page as a spill-over. My expectation was that all the child-expansion-panels at the inner-levels should have collapsed by themselves to keep the view clean. Is there a configuration/property binding that I am missing which causes this issue.

Upvotes: 1

Views: 3281

Answers (1)

Kim Kern
Kim Kern

Reputation: 60357

Update Nov 2018

The issue was fixed with version 6.0.0-beta.4 in this PR.

Original Post

Nested expansion panels do not seem to work perfectly yet. You can find several issues for that on Github. For one of them, there is already a PR: issue 1, issue 2

Follow those issues and maybe contribute your ideas; there should be a solution in an upcoming update.

Upvotes: 1

Related Questions