toc dropdown does not scroll on overflow

[jdeisenberg]

I have a very long toc at http://langintro.com/cljsbook ; if you view it in a small browser window (or on a small monitor), the entire "Chapters" TOC does not display; it is cut off at the bottom of the browser window. It would be good if it would scroll on overflow.

[ryan-roemer]

Talked with a CSS-savvy colleague of mine and here's what she came up with:

Option One -- Modern Browsers

If you're using modern browsers that support vh and calc() (aka http://caniuse.com/#feat=viewport-units) then you can add in a custom CSS extension with:

.dropdown-menu.globaltoc {
  max-height: calc(100vh - 50px); /* 50px is "whatever $("#navbar") height is" */
  overflow: scroll;
}

Option One -- Ye Olde Browsers Too

If you're supporting old browsers then you can do a CSS addition of one part:

.dropdown-menu.globaltoc {
  overflow: scroll;
}

and then complement that with added JS:

$(".dropdown-menu.globaltoc").height(
  $(window).height() - $("#navbar").height()
);

Let me know how it goes! If you're finding it works well, I'd accept a PR for the more-backwards-compatible-even-if-kludgy option two.

[jdeisenberg]

Thanks. I'm not sure where this code goes in which JS file, and whether I can add it as custom to an existing project or have to rebuild Sphinx and use a completely new version.

[ryan-roemer]

It's mostly just Sphinx overrides of template stuff like you'd customize any theme you're using.

Custom CSS can be added as documented here with specific hooks I've added: https://github.com/ryan-roemer/sphinx-bootstrap-theme/tree/master/demo/source

Custom JS can be added just by overriding templates. See the demo code (https://github.com/ryan-roemer/sphinx-bootstrap-theme/tree/master/demo/source/_templates) that does this with a <script> tag.

If the custom CSS/JS works and you like the overall thing, I would accept a PR that adds the second option in the theme's core CSS (https://github.com/ryan-roemer/sphinx-bootstrap-theme/blob/master/sphinx_bootstrap_theme/bootstrap/static/bootstrap-sphinx.css_t) and JS (https://github.com/ryan-roemer/sphinx-bootstrap-theme/blob/master/sphinx_bootstrap_theme/bootstrap/static/bootstrap-sphinx.js_t) files.

[jdeisenberg]

The version using vh and calc() works perfectly; the CSS/JS version doesn't recalculate when the window resizes (I put the <script> element in file _templates/plugin_layouts/sphinx_bootstrap/globaltoc.html)

[ryan-roemer]

It should work as long as your script tag is added after bootstrap-sphinx.js is injected. Can you post a link to a gist of the rendered HTML page so I can see where your code is getting injected?