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 runs off the page for long documents #204

Closed
wtholliday opened this Issue Nov 8, 2014 · 13 comments

Comments

Projects
None yet
8 participants
@wtholliday

wtholliday commented Nov 8, 2014

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?

categories

@ngzhian

This comment has been minimized.

Contributor

ngzhian commented Nov 8, 2014

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

@randomessence

This comment has been minimized.

randomessence commented Nov 10, 2014

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

This comment has been minimized.

prantlf commented Apr 8, 2015

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

This comment has been minimized.

Member

d0ugal commented Apr 9, 2015

(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 comment has been minimized.

Member

d0ugal commented Jun 24, 2015

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

@d0ugal d0ugal closed this Jun 24, 2015

@tomchristie

This comment has been minimized.

Contributor

tomchristie commented Jul 3, 2015

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

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

@d0ugal

This comment has been minimized.

Member

d0ugal commented Jul 3, 2015

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

@d0ugal d0ugal reopened this Jul 4, 2015

@d0ugal

This comment has been minimized.

Member

d0ugal commented Jul 7, 2015

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

@shichao-an

This comment has been minimized.

shichao-an commented Jul 10, 2015

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

This comment has been minimized.

jamesadevine commented Mar 3, 2016

@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

This comment has been minimized.

Member

d0ugal commented Mar 3, 2016

@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

This comment has been minimized.

Member

d0ugal commented Mar 3, 2016

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

@jamesadevine

This comment has been minimized.

jamesadevine commented Mar 3, 2016

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment