Expansion panels in tabs not working properly

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When I switch between tabs that both have expansion panels, I want the expansion panels to behave like they would in any other situation.

What is the current behavior?

The panels are sort of opened, and their style is messed up :

What are the steps to reproduce?

Stackblitz

Is there anything else we should know?

Unlike #5269 there's no hidden tab. So I think it isn't a duplicate, hence the new issue.

[tgmendes]

I have exactly the same problem as you do, and I also have looked at #5269 . The solutions there do apply to our case (you wrap the accordion/expansion panel with an *ngIf and only show if the tab is selected).

This did not work for me.

Here are some screenshots that may help:
Expected behavior (without tab switching):

Appearance after switching tabs:

I did not click anywhere in the expansion panels before switching tabs.

Hope this helps in figuring out the problem, as I am also facing this issue.

If you're looking for a workaround, you can add this :

 (selectedTabChange)="reloadTabs()"

With a tab condition

<mat-tab label="Tab One">
  <ng-container *ngIf="showTabContent">

And it does this

reloadTabs() {
  this.showTabContent = false;
  setTimeout(() => this.showTabContent = true, 500);
}

Works well for me (once I added a fake loading bar and some animation), but still, it's a workaround, and I expect a fix to come soon

[tgmendes]

Thanks for the fix @trichetriche .

I also expect there will be a solution for this.

[Bmahecha123]

The only issue I'm finding with this workaround is that the screen will scroll up to line up with the expanded content when you switch tabs. This happens when the tab container is the only element on the x axis.

Not sure this is related to the workaround since I faced this issue when I discovered material. My solution was to make the content take the whole space anyway, and change its overflow properties

[josephperrott]

With the submission of #8921, you should now be able to lazy load the content of the tabs. With the content of the tabs being lazy loaded, the animations move to the correct state as desired.

But what if I don't want to lazy load the content of the tabs ? Is it the only solution to this problem ?

[josephperrott]

At this point this is the only viable solution we have found as this is actually an issue of animations failing to trigger.

We hope to be able to determine a better solution in the future, but at this point this is the best solution we have found.

@trichetriche The solution given is not working for me.

My Problem:
When I change the tab to second one, expansion-panel's header is taking large height than necessary and arrow is down as if content is closed but content is visible. Same case with all expansion-panels headers and content in the second tab.

That's the exact same issue I have reported and I gave a workaround around that, that worked for me (and still works as of today).

If you have an issue, then provide a sandbox to show it, like you would open a question. In fact, if you think your problem is different, you should maybe open a question.

@trichetriche

Here is the code:

    <mat-tab label="Tab One">
        <mat-accordion multi="true">
            <mat-expansion-panel [expanded]="true">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Panel 1
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="50" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Price Range</label>
                        <div fxLayout fxLayoutWrap>
                            <div fxFlex="40" fxFlex.xs="100">
                                <input placeholder="Enter Min Price" [(ngModel)]="p.minPrice">
                            </div>
                            <div fxFlex="10" class="text-center to clr-grey">to</div>
                            <div fxFlex="40" fxFlex.xs="100">
                                <input type="" placeholder="Enter Max Price" [(ngModel)]="p.maxPrice" (focusout)="search()">
                            </div>
                        </div>
                    </div>
                    <div fxFlex="50" fxFlex.lt-lg="100" class="m-t-1">
                        <label>Days</label>
                        <div fxLayout>
                            <div fxFlex="40">
                                <select class="home-select" [(ngModel)]="p.minDay">
                                    <option value=0>No Min</option>
                                    <option value=1>1+</option>
                                    <option value=2>2+</option>
                                    <option value=3>3+</option>
                                    <option value=4>4+</option>
                                    <option value=5>5+</option>
                                </select>
                            </div>
                            <div fxFlex="10" class="text-center to clr-grey">to</div>
                            <div fxFlex="40">
                                <select class="home-select" [(ngModel)]="p.maxBed">
                                    <option value=0>No Max</option>
                                    <option value=1>1</option>
                                    <option value=2>2</option>
                                    <option value=3>3</option>
                                    <option value=4>4</option>
                                    <option value=5>5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title class="clr-grey font-20 m-y-2">
                        Panel 2
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Dropdown 1</label>
                        <select class="home-select" [(ngModel)]="p.Type">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                        </select>
                    </div>
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-t-1">
                        <label>Dropdown 2</label>
                        <select class="home-select" [(ngModel)]="p.Status">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                            <option value=5>value 5</option>
                            <option value=5>value 6</option>
                            <option value=5>value 7</option>
                            <option value=5>value 8</option>
                        </select>
                    </div>
                </div>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title class="clr-grey font-20 m-y-2">
                        Panel 3
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Dropdown 1</label>
                        <select class="home-select" [(ngModel)]="p.sys">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                            <option value=5>value 5</option>
                            <option value=6>value 6</option>
                            <option value=7>value 7</option>
                            <option value=8>value 8</option>
                        </select>
                    </div>
            </mat-expansion-panel>
        </mat-accordion>
    </mat-tab>
    <mat-tab label="Tab Two">
        <mat-accordion multi="true">
            <mat-expansion-panel [expanded]="true">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Panel 1
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="50" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Price Range</label>
                        <div fxLayout fxLayoutWrap>
                            <div fxFlex="40" fxFlex.xs="100">
                                <input placeholder="Enter Min Price" [(ngModel)]="p.minPrice">
                            </div>
                            <div fxFlex="10" class="text-center to clr-grey">to</div>
                            <div fxFlex="40" fxFlex.xs="100">
                                <input type="" placeholder="Enter Max Price" [(ngModel)]="p.maxPrice" (focusout)="search()">
                            </div>
                        </div>
                    </div>
                    <div fxFlex="50" fxFlex.lt-lg="100" class="m-t-1">
                        <label>Days</label>
                        <div fxLayout>
                            <div fxFlex="40">
                                <select class="home-select" [(ngModel)]="p.minDay">
                                    <option value=0>No Min</option>
                                    <option value=1>1+</option>
                                    <option value=2>2+</option>
                                    <option value=3>3+</option>
                                    <option value=4>4+</option>
                                    <option value=5>5+</option>
                                </select>
                            </div>
                            <div fxFlex="10" class="text-center to clr-grey">to</div>
                            <div fxFlex="40">
                                <select class="home-select" [(ngModel)]="p.maxBed">
                                    <option value=0>No Max</option>
                                    <option value=1>1</option>
                                    <option value=2>2</option>
                                    <option value=3>3</option>
                                    <option value=4>4</option>
                                    <option value=5>5</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title class="clr-grey font-20 m-y-2">
                        Panel 2
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Dropdown 1</label>
                        <select class="home-select" [(ngModel)]="p.Type">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                        </select>
                    </div>
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-t-1">
                        <label>Dropdown 2</label>
                        <select class="home-select" [(ngModel)]="p.Status">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                            <option value=5>value 5</option>
                            <option value=5>value 6</option>
                            <option value=5>value 7</option>
                            <option value=5>value 8</option>
                        </select>
                    </div>
                </div>
            </mat-expansion-panel>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title class="clr-grey font-20 m-y-2">
                        Panel 3
                    </mat-panel-title>
                    <mat-panel-description></mat-panel-description>
                </mat-expansion-panel-header>
                <mat-divider [inset]="true"></mat-divider>
                <div fxLayoutWrap fxLayout="row" fxLayoutAlign="space-between none">
                    <div fxFlex="49" fxFlex.lt-lg="100" class="m-b-20 m-t-1">
                        <label>Dropdown 1</label>
                        <select class="home-select" [(ngModel)]="p.sys">
                            <option value=0>value 0</option>
                            <option value=1>value 1</option>
                            <option value=2>value 2</option>
                            <option value=3>value 3</option>
                            <option value=4>value 4</option>
                            <option value=5>value 5</option>
                            <option value=6>value 6</option>
                            <option value=7>value 7</option>
                            <option value=8>value 8</option>
                        </select>
                    </div>
            </mat-expansion-panel>
        </mat-accordion>
    </mat-tab>
</mat-tab-group> ```

My angular version is 5. 

I don't really care about your code ... That doesn't show me the issue you're facing, and that doesn't show me if you tried the workaround I gave. And honestly, i didn't even read it, there's like 200 lines of your code that doesn't interest me, I've already got my answer, and that's a ticket for an issue, not for calling help.

So unless you provide a sandbox to test it, I won't be willing to help you, sorry.

I can understand, well right now I can't reveal the real code and show you the exact issue I am facing via sandbox. You too don't have time and unfortunately me too. I hoped you would be able recreate the issue with that code and help me. Anyways thank you for your words.

…

On 6:56PM, Fri, 20 Apr 2018 trichetriche, ***@***.***> wrote: I don't really care about your code ... That doesn't show me the issue you're facing, and that doesn't show me if you tried the workaround I gave. And honestly, i didn't even read it, there's like 200 lines of your code that doesn't interest me, I've already got my answer, and that's a ticket for an issue, not for calling help. So unless you provide a sandbox to test it, I won't be willing to help you, sorry. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#9834 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AjS-xuVGSZdzfW7HzEFECYUDvS_Mx3f-ks5tqeIigaJpZM4R-EiC> .