Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal scrolling missing for itables within ipywidget tabs #2133

Open
sjspence opened this issue Mar 15, 2024 · 1 comment
Open

Horizontal scrolling missing for itables within ipywidget tabs #2133

sjspence opened this issue Mar 15, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@sjspence
Copy link

Describe the bug

context
When I build a jupyter-book (HTML) that compiles a set of jupyter notebooks

expectation
I expected itables (interactive tables of dataframes) embedded with ipywidgets tabs to have horizontal scroll bars, if the size of the interactive table had columns extending horizontally and cut off by the display. This behavior (itable horizontal scrolling) is occurring as expected when itables are displayed one at a time.

Screenshot 2024-03-15 at 1 39 29 PM

bug
But instead the scroll bar is simply missing from every ipywidget tab where an itable is displayed.

Screenshot 2024-03-15 at 1 39 44 PM

There is no error message, just missing functionality.

problem
This is a problem for anyone building interactive HTML jupyterbooks with ipywidgets and itables. The jupyter-book HTML build has missing functionality relative to the interactive jupyter notebooks.

Reproduce the bug

  1. Create an environment that also includes pandas, itables, and ipywidgets (all installable via pip)

  2. Create a template book

jupyter-book create mynewbook/
  1. Add two cells to the template notebooks.ipynb, that converts the template data into a pandas dataframe, and then displays it normally and within tab widgets. All tables should show expected behavior in jupyter, but the tabbed tables will lose horizontal scrolling upon HTML export.
import pandas as pd
import ipywidgets as widgets
from itables import init_notebook_mode
init_notebook_mode(all_interactive=True)

df = pd.DataFrame(data)

df
df_descs = ['one', 'two']
outputs = []
for i, df_desc in enumerate(df_descs):
    out = widgets.Output()
    outputs.append(out)

tab = widgets.Tab(children=outputs)

for i, df_desc in enumerate(df_descs):
    tab.set_title(i, df_desc)
    with outputs[i]:
        display(df)

display(tab)
  1. Build the notebook, and then open index.html. The first cell above should show a table with a horizontal scroll bar (when screen is narrow enough). The second cell above should show tables within tabs lacking horizontal scroll bars.
jupyter-book build mybookname/

List your environment

Jupyter Book : 1.0.0
External ToC : 1.0.1
MyST-Parser : 2.0.0
MyST-NB : 1.0.0
Sphinx Book Theme : 1.1.2
Jupyter-Cache : 1.0.0
NbClient : 0.10.0

python 3.12.2
pandas 2.2.1
itables 1.7.1
ipywidgets 8.1.2

@sjspence sjspence added the bug Something isn't working label Mar 15, 2024
Copy link

welcome bot commented Mar 15, 2024

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant