Expansion panels in tabs not working properly

[ghost]

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.

[ghost]

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.

[ghost]

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.

[ghost]

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.

[ghost]

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

[ghost]

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.

[ghost]

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

[ghost]

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.

[ghost]

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

[yajneshrai]

I too faced this issue. A big thanks to @trichetriche for the work around! Made my life easier.

[ghost]

issue is still there,
#5269

[ghost]

Your link is dead and we are aware the issue is still there. As said before, it won't be corrected, but there is 2 workarounds for it.

[ghost]

May be those 2 workarounds doesn't work for everyone. If it is in material and is public to use then it should be developed in such a way that everybody can use it without any issue. *Thanks & Regards* Yaseen Nadaf Full Stack Web Developer

…

On Tue, Jun 12, 2018 at 1:00 PM, trichetriche ***@***.***> wrote: Your link is dead and we are aware the issue is still there. As said before, it won't be corrected, but there is 2 workarounds for it. — 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-xk4JP2GeI8icUBMmlzFIEBnDk7tBks5t724YgaJpZM4R-EiC> .

[ghost]

I would like to know the reason why it won't be corrected? *Thanks & Regards* Yaseen Nadaf Full Stack Web Developer

…

On Tue, Jun 12, 2018 at 1:51 PM, Yaseen Nadaf ***@***.***> wrote: May be those 2 workarounds doesn't work for everyone. If it is in material and is public to use then it should be developed in such a way that everybody can use it without any issue. *Thanks & Regards* Yaseen Nadaf Full Stack Web Developer On Tue, Jun 12, 2018 at 1:00 PM, trichetriche ***@***.***> wrote: > Your link is dead and we are aware the issue is still there. As said > before, it won't be corrected, but there is 2 workarounds for it. > > — > 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-xk4JP2GeI8icUBMmlzFIEBnDk7tBks5t724YgaJpZM4R-EiC> > . >

[ghost]

The purpose of a workaround is to work. If it doesn't, that's not a workaround, it's a bug ...

And in case you're not aware, devs can face limitations. If you cared to read the whole thread you would have seen that it is the case there.

And again, read the thread to answer your second question.

[ghost]

@trichetriche I re-pasted the link. Workarounds take additional time to implement and cost dev time, I rather not be spending time implementing a workaround, therefore it should be fixed. either ways the workaround does work.

[nategurian]

@trichetriche Workaround works great. Thanks! Took no time at all to implement and works as expected

[coaxfiber]

put selectedtabchange in mat tab group

create a variable and the function

then put the ng if in accordion elements for each tab

the first tab is equal to 0
the second tab is equal to 1 and so on

this hides all the accordion element and shows only the accordions corresponding to the tab index.

[angular-automatic-lock-bot]

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