Panel tabbed layout with responsive heights

Hi is there a way to make pn.Tabs have dynamic height based on the tabs content?

Here is a simple reproducer:

import panel as pn
pn.extension()


tabs = pn.Tabs(('A', pn.Column("#asd", height=200)), ('B', pn.Column("#qwe")))
pn.Column(tabs, height=100)

Here, I dont want a scroll bar with the tab A.

1 Like

Hi @govinda18

I don’t see a scroll bar with the tab A. What I see is

import panel as pn

pn.extension(sizing_mode="stretch_width")


tabs = pn.Tabs(
    ("A", pn.Column("#asd", height=200, background="yellow")),
    ("B", pn.Column("#qwe", background="salmon")),
    background="blue",
)
pn.Column(tabs, height=100).servable()

You can use a function like set_height below to change the height of the Tabs when the active tab changes.

import panel as pn

pn.extension(sizing_mode="stretch_width")


tabs = pn.Tabs(
    ("A", pn.Column("#asd", height=200, background="yellow")),
    ("B", pn.Column("#qwe", height=100, background="salmon")),
    background="blue",
)
pn.Column(tabs).servable()

@pn.depends(tabs.param.active, watch=True)
def set_height(index):
    tab = tabs[index]
    tabs.height=tab.height

Thanks @Marc will try it out

1 Like