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

Don't show scrollbar if there's nothing to scroll #206

Closed
wants to merge 1 commit into from

Conversation

untitaker
Copy link

Fix #200

Only tested with Firebug, didn't bother to install SASS.

Fix readthedocs#200

Only tested with Firebug, didn't bother to install SASS.
@untitaker
Copy link
Author

cc @agjohnson

@untitaker
Copy link
Author

BTW this works with Chromium and Firefox on Linux.

@agjohnson
Copy link
Collaborator

Thanks for submitting a patch! Unfortunately this isn't a full fix. As overflow: auto only shows a scrollbar if the content is clipped, this will still show a scrollbar on long nav content. Likewise overflow: hidden doesn't fix the issue for the opposite reason -- a long nav and short doc content makes a nav that doesn't scroll. I tested this on Linux FF and Chrome and reproduced the error I described with the suggested css edits.

@agjohnson agjohnson closed this Jun 6, 2015
@untitaker
Copy link
Author

untitaker commented Jun 6, 2015 via email

@agjohnson
Copy link
Collaborator

Ah okay -- no, that's a display bug new to 0.18. it should be hidden completely.

@untitaker
Copy link
Author

How else would you display larger menus then?

@untitaker untitaker deleted the overflow branch June 6, 2015 21:00
@agjohnson
Copy link
Collaborator

It should display as-is, but with a hidden scrollbar that still allows for scrolling. The current CSS works correctly rather sporadically across browsers, and not at all on several browsers on Linux it seems.

@untitaker
Copy link
Author

I don't understand what you mean with a hidden scrollbar. Should it only show when the user hovers? Or should it scroll with the rest of the site?

On 6 June 2015 23:48:30 CEST, Anthony notifications@github.com wrote:

It should display as-is, but with a hidden scrollbar that still allows
for scrolling. The current CSS works correctly rather sporadically
across browsers, and not at all on several browsers on Linux it seems.


Reply to this email directly or view it on GitHub:
#206 (comment)

@agjohnson
Copy link
Collaborator

The scrollbar should never show.

agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this pull request Jul 17, 2015
This resolves readthedocs#200, where a scrollbar was sometimes visible on the navbar. This
unfortunately wasn't addressable with just CSS, as outlined in readthedocs#206. Because we
need the element to be scrollable, we can't set `overflow: hidden` on the nav
element.

This fixes this issue by:

 * Adding a `wy-side-scroll` element over the fixed position nav element and
   under the menu item elements
 * `wy-side-scroll` is set to 320px width, while the fixed position nav elements
   and menu item elements are 300px, clipping the scrollbar with `overflow-x:
   hidden` on the fixed position element
 * Javascript is set to scroll the new scroll element instead of the parent
   fixed position element
 * For backwards compatibility on already generated HTML, the new scroll element
   is added dynamically if it is missing, and children of the fixed position
   element are moved there.

This was tested to be working in both cases, on Linux FF, Chrome, Windows IE,
and OSX Chrome and Safari.
agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this pull request Jul 17, 2015
This resolves readthedocs#200, where a scrollbar was sometimes visible on the navbar. This
unfortunately wasn't addressable with just CSS, as outlined in readthedocs#206. Because we
need the element to be scrollable, we can't set `overflow: hidden` on the nav
element.

This fixes this issue by:

 * Adding a `wy-side-scroll` element over the fixed position nav element and
   under the menu item elements
 * `wy-side-scroll` is set to 320px width, while the fixed position nav elements
   and menu item elements are 300px, clipping the scrollbar with `overflow-x:
   hidden` on the fixed position element
 * Javascript is set to scroll the new scroll element instead of the parent
   fixed position element
 * For backwards compatibility on already generated HTML, the new scroll element
   is added dynamically if it is missing, and children of the fixed position
   element are moved there.

This was tested to be working in both cases on a variety of platforms: Linux FF,
Chrome, Windows IE, OSX Chrome and Safari, iPhone 5.1, and Android 4.2.
agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this pull request Sep 9, 2015
This resolves readthedocs#200, where a scrollbar was sometimes visible on the navbar. This
unfortunately wasn't addressable with just CSS, as outlined in readthedocs#206. Because we
need the element to be scrollable, we can't set `overflow: hidden` on the nav
element.

This fixes this issue by:

 * Adding a `wy-side-scroll` element over the fixed position nav element and
   under the menu item elements
 * `wy-side-scroll` is set to 320px width, while the fixed position nav elements
   and menu item elements are 300px, clipping the scrollbar with `overflow-x:
   hidden` on the fixed position element
 * Javascript is set to scroll the new scroll element instead of the parent
   fixed position element

This was tested to be working in both cases on a variety of platforms: Linux FF,
Chrome, Windows IE, OSX Chrome and Safari, iPhone 5.1, and Android 4.2.
agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this pull request Sep 9, 2015
This resolves readthedocs#200, where a scrollbar was sometimes visible on the navbar. This
unfortunately wasn't addressable with just CSS, as outlined in readthedocs#206. Because we
need the element to be scrollable, we can't set `overflow: hidden` on the nav
element.

This fixes this issue by:

 * Adding a `wy-side-scroll` element over the fixed position nav element and
   under the menu item elements
 * `wy-side-scroll` is set to 320px width, while the fixed position nav elements
   and menu item elements are 300px, clipping the scrollbar with `overflow-x:
   hidden` on the fixed position element
 * Javascript is set to scroll the new scroll element instead of the parent
   fixed position element

This was tested to be working in both cases on a variety of platforms: Linux FF,
Chrome, Windows IE, OSX Chrome and Safari, iPhone 5.1, and Android 4.2.
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 this pull request may close these issues.

2 participants