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.

Sign up for GitHub

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

Add CSS to allow scrolling of ipywidget #1760

Merged
merged 1 commit into from
May 23, 2024
Merged

Add CSS to allow scrolling of ipywidget #1760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions docs/examples/pydata.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@
"\n",
"This theme has built-in support and special styling for several major visualization libraries in the PyData ecosystem.\n",
"This ensures that the images and output generated by these libraries looks good for both light and dark modes.\n",
"Below are examples of each that we use as a benchmark for reference.\n",
"\n",
"Below are examples of each that we use as a benchmark for reference."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Pandas"
]
},
Expand All @@ -30,6 +35,46 @@
"df"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## IPyWidget"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"import numpy as np\n",
"import ipywidgets as widgets\n",
"from IPython.display import display\n",
"\n",
"tab = widgets.Tab()\n",
"\n",
"descr_str = \"Hello\"\n",
"\n",
"title = widgets.HTML(descr_str)\n",
"\n",
"# create output widgets\n",
"widget_images = widgets.Output()\n",
"widget_annotations = widgets.Output()\n",
"\n",
"# render in output widgets\n",
"with widget_images:\n",
" display(pd.DataFrame(np.random.randn(10,10)))\n",
"with widget_annotations:\n",
" display(pd.DataFrame(np.random.randn(10,10)))\n",
"\n",
"tab.children = [widget_images, widget_annotations]\n",
"tab.titles = [\"Images\", \"Annotations\"]\n",
"\n",
"display(widgets.VBox([title, tab]))"
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand Down Expand Up @@ -143,7 +188,7 @@
},
"language_info": {
"name": "python",
"version": "3.10.8"
"version": "3.11.6"
}
},
"nbformat": 4,
Expand Down
1 change: 1 addition & 0 deletions pyproject.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ doc = [
"nbsphinx",
"ipyleaflet",
"colorama",
"ipywidgets"
]
test = ["pytest", "pytest-cov", "pytest-regressions"]
dev = ["pyyaml", "pre-commit", "nox", "pydata-sphinx-theme[doc,test]"]
Expand Down
6 changes: 6 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,9 @@
.xr-wrap[hidden] {
display: block !important;
}

// ipywidgets
.jp-OutputArea-output.lm-Widget {
// override overflow:hidden rule from Lumino (.lm-Widget) to allow scrolling
overflow: auto;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely sure if I should set auto for both x and y or just x, but I decided to follow JupyterLab's lead, though to be honest I'm not entirely sure if the scenario described in jupyterlab/jupyterlab#6104 is applicable or not to sites built with PyData Sphinx Theme.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: I tested that this works for both nbsphinx and myst-nb (works = allows horizontal scrolling for wide table inside an ipywidget).

I'm wondering if there's some way to test this automatically, or if we could build two example pages from the same identical notebook, one through myst-nb and the other through nbsphinx.

}
Loading