angular / angular/components

[Tabs] Dynamic height does not work when content has changed

Open
#3,191 7 comments 5 reactions 0 assignees View on GitHub
area: material/tabs P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Tabs should transition height properly when content is added dynamically.

#### What is the current behavior?
Adding content to a tab does not modify the 'base animation height' resulting in weird animations.

#### What are the steps to reproduce?
~~http://plnkr.co/edit/Sccmy7os1nuaELrradRv?p=preview~~
~~http://plnkr.co/edit/ZSBCT8P9xCi04rrKSCu3?p=preview~~
https://stackblitz.com/edit/angular-humdjf?file=src%2Fapp%2Fapp.component.html
Add content dynamically and change tab.

#### Is there anything else we should know?
~~Documentation is missing for dynamicHeight on material.angular.io~~

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/app/app.component.html, and inspect the Angular Material tabs implementation for dynamicHeight. Reproduce the issue by adding content dynamically and changing tabs; done means the tab height transition uses the updated content size.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.