Skip to content

feat(tab): add fullHeight input for vertical space occupation#692

Open
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/574-tab-full-height
Open

feat(tab): add fullHeight input for vertical space occupation#692
giulio-leone wants to merge 2 commits into
italia:mainfrom
giulio-leone:feat/574-tab-full-height

Conversation

@giulio-leone

Copy link
Copy Markdown
Contributor

Closes #574

Adds a fullHeight boolean input to ItTabContainerComponent that makes the component occupy the full available vertical space, matching the horizontal tab's behavior.

Usage

<div style="height: 600px">
  <it-tab-container [vertical]="true" [fullHeight]="true">
    <it-tab-item label="Tab 1" [active]="true">Content</it-tab-item>
    <it-tab-item label="Tab 2">Content</it-tab-item>
  </it-tab-container>
</div>

<div style="height: 400px">
  <it-tab-container [fullHeight]="true">
    <it-tab-item label="Tab A" [active]="true">Content</it-tab-item>
  </it-tab-container>
</div>

How it works

  • Host element: height: 100%, d-flex, plus flex-column for horizontal layout
  • Vertical row wrapper: h-100 so columns fill the available height
  • Horizontal wrapper: flex-grow-1 for proper space distribution
  • Nav tabs (vertical): h-100 for full-height sidebar effect
  • Tab content + active pane: flex-grow-1 + d-flex + flex-column for content stretching

Tests

  • 11 new tests: 7 for vertical fullHeight, 4 for horizontal fullHeight
  • 120/120 tests passing, 0 lint errors, double gate verified

⚠️ This reopens #648 which was accidentally closed due to fork deletion.

giulio-leone and others added 2 commits March 25, 2026 11:45
Add a fullHeight boolean input to ItTabContainerComponent that makes the
component occupy the full available vertical height. When enabled:
- Host element gets height:100%, d-flex, and appropriate flex-direction
- Row wrapper gets h-100 for vertical layout or flex-grow-1 for horizontal
- Tab content and active pane get flex-grow-1 for proper space distribution
- Nav tabs list gets h-100 in vertical mode for full-height sidebar

Closes italia#574

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Show [fullHeight]="true" usage with a 300px container to demonstrate
the tab expanding to fill its parent height using flexbox layout.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@vercel

vercel Bot commented Mar 25, 2026

Copy link
Copy Markdown

@giulio-leone is attempting to deploy a commit to the dip-trasformazione-digitale Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Mar 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
design-angular-kit Error Error Mar 27, 2026 3:37pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] Possibilità di far occupare lo spazio verticale disponibile al componente <it-tab-container>

1 participant