search

ipython-contrib / jupyter_contrib_nbextensions

A collection of various notebook extensions for Jupyter
http://jupyter-contrib-nbextensions.readthedocs.io/en/latest
Other
5.2k stars 805 forks source link

bad positioning in toc2 extension #1629

Open paulovn opened 1 year ago

paulovn commented 1 year ago

Hi. I'm trying to use the toc2 extension, but the toc pane is positioned above where it should (to the window top), and hence the upper section of the sidebar gets behind the notebook menu bars:

Screenshot from 2023-03-12 10-54-28

My configuration is:

jupyter_client                    8.0.3
jupyter-console                   6.6.3
jupyter-contrib-core              0.4.2
jupyter-contrib-nbextensions      0.7.0
jupyter_core                      5.2.0
jupyter-events                    0.6.3
jupyter-highlight-selected-word   0.2.0
jupyter-nbextensions-configurator 0.6.1
jupyter_server                    2.4.0
jupyter_server_terminals          0.4.4
jupyterlab-pygments               0.2.2
jupyterlab-widgets                3.0.5
nbclassic                         0.4.8
notebook                          6.5.3
notebook_shim                     0.2.2

On an Ubuntu 22.04.2 system. As per #1628 I installed with nbclassic<0.5, but the issue is the same if I use nbclassic 0.5.3

The issue seems to be related to some CSS. The computed positioning of the toc-wrapper DIV is:

Screenshot from 2023-03-12 10-56-21

and somehow this is pushing the DIV above its natural position. If I manually add a top: 106px property to that DIV, then it appears to be positioned fine:

Screenshot from 2023-03-12 10-58-08

... but this seems like a hack. Also, there are other issues: the configuration toggle to display as a floating window is not working (though I can manually drag the sidebar as a floating window), and the "Navigate" pull-down menu opens as a truncated window:

Screenshot from 2023-03-12 11-31-50

Is there any configuration/installation combination that I could use to fix this behaviour?

RNarayan73 commented 1 year ago

@paulovn I have the same issue and as a workaround, I noticed that if you select any branch of the ToC tree and pull it down, then it gets displayed properly. Until it is fixed...

paulovn commented 1 year ago

@paulovn I have the same issue and as a workaround, I noticed that if you select any branch of the ToC tree and pull it down, then it gets displayed properly. Until it is fixed...

I ended up using the mentioned nasty hack: adding a CSS property

top: 106px; /* hack to fix behaviour */

to the #toc-wrapper element. Seems to work, but it's fragile.