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

TOC extension is hiding below toolbar #1651

Open
ibobak opened this issue Sep 2, 2023 · 5 comments · May be fixed by #1662
Open

TOC extension is hiding below toolbar #1651

ibobak opened this issue Sep 2, 2023 · 5 comments · May be fixed by #1662

Comments

@ibobak
Copy link

ibobak commented Sep 2, 2023

Guys,

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

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
image

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
Copy link
Author

ibobak commented Oct 17, 2023

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:
image

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

@srcarter3
Copy link

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! 🤞 🙏
Screen Shot 2023-10-20 at 4 44 26 PM

@ibobak
Copy link
Author

ibobak commented Mar 6, 2024

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:
image

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
Copy link

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 added a commit to coatless/jupyter_contrib_nbextensions that referenced this issue May 31, 2024
This adds a top margin of 10em to ensure the table of contents initial section is visible and not cutoff/inaccessible.

Close ipython-contrib#1651
@coatless
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants