Tabs should easily support filling the full height of the parent container

[christianvogt]

Describe the issue. What is the expected and unexpected behavior?

There is no way to use the Tabs react component and achieve a layout where the tab content extends the full height of the container. The tab content will only size to its contents or the dev needs to add some external css, targeting the inner components, to make it work.

The Tabs component renders the tabs header and the tab content as siblings with no parent node managing the layout between the header and content. To achieve a layout where the tab content expands to fill the available height of the container, we need to place a flex layout in the parent and set flex-grow: 1 on the tab content. This isn't intuitive to a consumer of the react component where the user will expect to simply use a prop (eg fullHeight), set height: 100% or set flex-grow: 1 and expect the entire tab component to fill the available space.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

In this codesandbox, the 2nd tab shows the desired behavior where a
https://codesandbox.io/s/autumn-darkness-bor1n

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Enhancement.
Workaround is to hack the CSS of the react component to achieve the desired layout.

[tlabaj]

cc @mcoker

[mcoker]

@christianvogt in this case, I think the stack layout would work well. The stack layout uses height: 100%; to fill the height of its parent element, assuming the parent has an implicit or explicit height. The part that the stack layout wouldn't handle is the scrollable section, though I can see value in adding a modifier to the stack layout so that any stack item (child of the stack layout) could get overflow: auto. I've modified your demo here, adding a custom .pf-m-scroll modifier to the stack item that contains the tab content panels - https://codesandbox.io/s/little-silence-0p3gn?file=/index.js

Would something like that work?

[christianvogt]

@mcoker I didn't realize that TabContent was part of the API. I see now it is present in the docs in the very last example.
Yes this is the behavior I am looking for.

There's a lot of boilerplate needed here to get this layout. I think it would be useful to developers if PF would support this.

[christianvogt]

I just raised an issue for uncontrolled support: patternfly/patternfly-react#4458
If Tabs were to get uncontrolled behavior support, this request will make even more sense to achieve such a layout without the boilerplate.

[mcoker]

@christianvogt sorry for the delay. Would a variation to fill the available height work? Like all things that fill height using CSS, it would require the parent have an implicit or explicit height, but it could apply height: 100%; flex-grow: 1; to try and fill its parent.

[christianvogt]

First thing that comes to mind for ease of use would be to support a structure like this. I understand that the current Tabs component is more flexible and allows rendering the tabs separate from the content. However I feel for most cases the content follows immediately after the tabs. The style prop for the tabs can be applied to the container div such that it can fill the container and support scrolling just the tab content.

So perhaps another variant that simplifies to this markup. It can more easily support uncontrolled variant as well.

<Tabs style={{ height: '100%', flexGrow: 1 }}>
  <Tab name="Tab 1">{tab1Children}</Tab>
  <Tab name="Tab 2">{tab2Children}</Tab>
  <Tab name="Tab 3">{tab3Children}</Tab>
</Tabs>

[mcoker]

Hey @christianvogt sorry for the delay, just wanted to check in and say I've still got this on my radar and will try and review what this could look like in our current milestone and get back to you.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[christianvogt]

:(

[mcoker]

From @christianvogt:

What I wanted to do is have this logs viewer consume the available height of the tab. I have to wrap the tabs with my own flex container and let the content grow. <Tabs...><Tab></Tab><Tab></Tab></Tabs> results in <div>...</div><div>...</div>, so it’s necessary for me to wrap and manage my own layout for this. I don’t want to control the tab selection either so this is an uncontrolled tab group. While I can achieve a solution, it’s not dev friendly.