sphinx_rtd_theme
sphinx_rtd_theme copied to clipboard
readthedocs
Fix always showing dead scrollbar in flyout
Stop always showing a scrollbar on the flyout menu, though preserve flyout menu scrolling if the content doesn't fit in the viewport.
This one has bothered me for a while. At some point we introduced an always-on scroll bar:
For the vast majority of cases, the scroll bar isn't needed -- this content would only be scrollable if you had a large number of versions or your viewport was very short.
This makes only the flyout menu content scrollable and it makes the scrollbar only show when needed. It gets rid of the scrollbar over the .rst-current-version header element -- this element shouldn't be part of the scrollable content.
In order to do this, we control the version menu height from the child .rst-other-versions instead of from the parent .rst-versions element. We can't force the height on the parent .rst-versions like we were, because that makes it much harder to also control the height (and set the content to scrollable) on the child .rst-other-versions at the same time. Controlling the spacing and positioning of the scrollable content is very hard with the part div height set.
So instead, we set the height at the child .rst-other-versions and let that dictate the height of the .rst-versions div. Because this div doesn't include the height that the .rst-current-version header element takes up, we can't set height: 100%, or the .rst-current-versions element would not be visible on flyout menus that exceed the viewport height.
Instead, 80vh or 90vh is used here for a max-height, based on a media query. This is an approximation to include the .rst-current-version header element in our height calculation -- at viewport breakpoint height of 410px, 90vh = 369px, leaving 41px (the height of the .rst-current-version element).
Ideally, we could restructure the html to allow .rst-current-version to float in a way that allowed the child .rst-other-versions to occupy the full height of the .rst-versions parent element. We can sett max-height: 100vh or perhaps max-height: 100% in this case.
Fixes #791
