feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
Currently, the best solution I've found is to override:
`::ng-deep .mat-mdc-tab-body-wrapper { flex-grow: 1; }`
See this [reproduction](https://stackblitz.com/edit/1kawpj?file=src%2Fexample%2Ftab-group-basic-example.html,src%2Fexample%2Ftab-group-basic-example.scss).
If `flex-grow: 1` was added to the body wrapper or an API option provided that allowed that behaviour without using `::ng-deep`, that would be great. Thanks.
### Use Case
Situations where I want a tab group to occupy the full height available and have its contents expand to the available height. E.g. a table or text editing component inside a tab that is scrollable but should occupy as much of the height available as possible.
Contributor guide
Research direction
Start with the linked StackBlitz reproduction, especially src/example/tab-group-basic-example.html and src/example/tab-group-basic-example.scss, and inspect how the mat-tab-group lays out its body. Compare the existing ::ng-deep flex-grow workaround with the requested behavior; done means a tab group can fill the available height and its contents can expand without that override.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100