TOC runs off the page for long documents

[wtholliday]

If you have enough parts in your document, the TOC becomes taller than the screen and sections can't be accessed. Is there something I can configure?

[ngzhian]

may i know what theme this is? it can probably be fixed via css, by setting the overflow attribute

[randomessence]

This is the same across all bootstrap / bootswatch theme. I had this issue with mdwiki also so I know it is not specific to mkdocs. It is requires a change to the bootstrap/bootswathc theme.

For example, add this to a new line of the amelia css file linked below and see.

Lib/site-packages/mkdocs/themes/amelia/css/bootstrap-custom.min.css

Add this on a new line, save.

.dropdown-menu {max-height: 400px;max-width: 500px;overflow: auto;}

Refresh page.

[prantlf]

I don't see it happening at least with the readthedocs theme. The navigation items are in a scrollable list. The readthedocs theme is more suitable if there are many articles in the navigation than the mkdocs theme, which uses (non-scrollable) menu dropdowns at the top.

[d0ugal]

(To be clear, this is a problem with the table of contents, not the drop down menus. There is an issue for the navbar here: #210)

This happens on every theme except readthedocs. I tried to set overflow: scroll but either it isn't that simple or I tried the wrong elements.

Here is an example, it is easy to reproduce if you just copy and paste a section a ton of times to make the TOC really long.

[d0ugal]

This will now be handled in the theme repos. mkdocs/mkdocs-bootswatch#2 and mkdocs/mkdocs-bootstrap#3

[tomchristie]

"This will now be handled in the theme repos."

Presumably we have the issue for the built-in mkdocs theme still tho?

[d0ugal]

I think somebody fixed it for MkDocs. But I am not 100% sure.

[d0ugal]

Confirmed. This is still an issue on the mkdocs theme.

[shichao-an]

I've tried adding the following CSS to bs-sidebar (in site's custom.css) as referenced on stackoverflow and it seems to work, at least on the flatly theme that I used.

.bs-sidebar {
  overflow-y: auto;
  max-height: 100%;
}

You can view my result here: https://notes.shichao.io/apue/ch8/

[jamesadevine]

@d0ugal Hey!

Really impressed with mkdocs as a whole, a really cool project, with really nice documentation! 😃

In #696, I just wanted to add that perhaps using the viewport height to size the bh-sidebar would be better. 90% of the page is different to 90% of the viewport height!

.bs-sidebar.well {
    padding: 0;
    max-height:85vh;
    overflow-y: auto;
}

This results in a pretty nicely sized sidebar that grows proportionally with the window.

[d0ugal]

@jamesadevine Interesting. I wasn't aware of vh units. It looks like IE and Edge only partially support this which is a concern and I don't have access to either to test it out. Happy to accept a pull request if you are able to test on IE and provide screenshots before/after.

[d0ugal]

Although, it looks like they they both support vh - so a pull request would be the way to go here.

[jamesadevine]

@d0ugal happy to oblige, I will make a pull request when I have a sec 😃

I will also provide screenshots of before and after for verification.