angular / angular/components

feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group

Open
#27,162 9 comments 17 reactions 0 assignees View on GitHub
feature P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.