[Tabs] Expose size of largest tab content

[ChristophLabacher]

Feature request

Overview

I am using the Tabs component in a vertical setup. The height of the component is defined by the height of the tab list or the height of the currently active tab (whatever is larger)

I would like the height of the component to remain the same, no matter which tab is active. This means I need the largest tab content to define the height of the entire element. In my example, this would be tab 3.

A sensible and compatible way of enabling this would be to expose a CSS variable that contains the height of the largest tab, similar to the --radix-collapsible-content-height variable provided by Collapsible. This variable could then be used to set the height of the component.

[andy-hook]

Hey @ChristophLabacher, while I can see the need for this I’m not convinced the css variable approach would be the best fit here. In order to measure the tallest content we’d need to ensure they are all present in DOM, we’ve discussed in the past ways to make this customisable but currently we don't provide an official setting for it (the content children always unmount when inactive).

I think simply having a customisable mount option would be enough to solve this for you, you could then use CSS to layer them such that they remain in flow, with the tallest item creating the consistent height you’re looking for.

I’ll leave this open as I think this is a valid need, but the approach I’d suggest we take is to provide more control on the mounting behaviour rather than a specific height variable.

[mohamedamara1]

hello, any updates on this?