Overflow-x not working properly within an ipywidget.Output widget

[c3-yiminliu]

See the following example:

import pandas as pd

import itables.options as opt
from itables import init_notebook_mode, show
from itables.sample_dfs import get_countries

df = get_countries(html=False)

df = pd.concat([df]*10, axis=1)

init_notebook_mode(all_interactive=True)

show(df)

Dataframe displays nicely in a cell. X-scroll is available, pages, search box are visible.

import ipywidgets
out = ipywidgets.Output()

with out:
    show(df)

out

When displayed within an ipywidgets.Output, X-scroll is not available, pages, search box are not visible.

Maximize the window does not help since there are too many columns:

Need to zoom out by a lot to see the pages and search box.

Is there a way to improve the display within an ipywidgets.Output?

Thanks

[mwouts]

Hi @c3-yiminliu, thanks for sharing this example, I didn't know that you could use ITables in an output widget! That's great!

What version of Jupyter/ITables are you using? When I run your example it looks fine on my end (Jupyter Lab 4.0.11). FYI the horizontal overflow was fixed in ITables v2.1.2, see https://mwouts.github.io/itables/changelog.html

Also, I plan to provide a Jupyter widget for ITables soon, you might want to subscribe to #267 for updates.

[c3-yiminliu]

Hi @mwouts , thanks for the reply!

This is my Jupyter and itables version:

In your example, are you able to see all the columns? In this example, the dataframe has 50 columns.

[mwouts]

I think so! Well I mean I can scroll horizontally, cf. the screencast below. So maybe this is an incompatibility with Jupyter 3? Also, I am using ipywidgets==8.1.3

[c3-yiminliu]

Thanks @mwouts. Good to know it works well with Jupyter 4.

My ipywidgets version is

One "workaround" is to provide a fixed width in pixels. This does not work well for all screen resolutions but at least can be configured.

Thanks for the help!

[c3-yiminliu]

@mwouts feel free to close the issue (given it works well with latest Jupyter).