TOC extension is hiding below toolbar

[ibobak]

Guys,

the last version of your extension has this bug with TOC:

It can be fixed like that:

from IPython.display import display, HTML
display(HTML("<style>.container { width:83%; align: left; }</style>"))
display(HTML("<style>#toc-wrapper{ position: relative; width: 20%; top: 132px; left: 0px; }</style>"))

And after running this code I am getting

It is really annoying, taking into account that this continues to be there for half a year at least.
Could you please fix this in the code?

[ibobak]

Today is the 17th of October.
I've just downloaded a fresh Anaconda - Anaconda3-2023.09-0-Linux-x86_64.sh, made installation on a fresh Ubuntu 22.04.3 machine, then I installed extensions

conda install -c conda-forge jupyter_contrib_nbextensions

Then launched jupyter notebook, created a new notebook, switched on the TOC, and again I see the same:

It looks like the issue is 100% reproducible and noone is going to do anything with it...

[srcarter3]

Yes, we've been using this extension for a few years now, and we also just noticed this bug a few months back and is still an issue. It would be really helpful if this was solved! 🤞 🙏

[ibobak]

Actually, I found a better solution how to patch that.

I see three files:

• /home/ihor/.local/share/jupyter/nbextensions/toc2/main.css
• /opt/anaconda3/lib/python3.1/site-packages/jupyter_contrib_nbextensions/nbextensions/toc2/main.css
• /opt/anaconda3/share/jupyter/nbextensions/toc2/main.css

I don't know which of them is used by TOC extension, but in all of them I found #toc-wrapper and fixed it like this:

#toc-wrapper {
  z-index: 90;
  position: fixed !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  border-style: solid;
  border-width: thin;
  background-color: #fff;   /* default - alterable via nbextension-configurator */
  top: 100px;
}

As you may notice, "top: 100px;" is added.

And now, after this fix, I see this:

Now it is visible.

I have one thing to ask from developers of this extension: could you be so kind as to fix the css?
Thanks.

[srcarter3]

It seems like the solution @ibobak has come up with with the slight modification to the .css file should be an easy implementation. Is this something you could please add into the latest release of nbextensions?

[coatless]

I submitted a PR that incorporates a top: 10em; styling rule to main.css in #1662.

If there are any maintainers, it would be greatly appreciated by if this could be reviewed and/or acted upon.