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
Marc
2
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()
Marc
3
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