holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.83k stars 520 forks source link

Overflowing pane container #6757

Open droumis opened 7 months ago

droumis commented 7 months ago

ALL software version info

panel 1.4.1

Description of expected behavior and the observed behavior

While trying to get a tabulator table to fit within widgetbox in a sidebar. I found that the table overflows the pane container. This is not specific to sidebar.

Complete, minimal, self-contained example code that reproduces the issue

import pandas as pd
import numpy as np
import panel as pn; pn.extension('tabulator')

vals = np.arange(100)
df = pd.DataFrame({f'column{l}':vals for l in np.arange(5)})

widget = pn.WidgetBox(
    pn.pane.Alert('Tabulator overflows pane container', alert_type='warning'),
    pn.widgets.Tabulator(df,
                         layout='fit_data_fill',
                         pagination='local',
                         page_size=10,
                        ),
    pn.pane.Alert('Tabulator overflows pane container', alert_type='warning'),
)

template = pn.template.FastGridTemplate(
    sidebar=[widget],
    main=[widget],
)
template.servable();

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

image

droumis commented 7 months ago

Same with Accordion

image
droumis commented 7 months ago

image

ahuang11 commented 2 months ago

To get around this, I think you can set sizing_mode="stretch_width" on Tabulator

image

Tried manually adding width: calc(100% - 20px) and it seems to work too.

image