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.

Sign up for GitHub

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

Jump to bottom

Navbar scrollbar intermittently shows #200

Closed
agjohnson opened this issue May 23, 2015 · 2 comments · Fixed by #215
Closed

Navbar scrollbar intermittently shows #200

agjohnson opened this issue May 23, 2015 · 2 comments · Fixed by #215
Assignees
@agjohnson
Milestone
v0.1.9

Comments

@agjohnson
Copy link
Collaborator

Moving readthedocs/readthedocs.org#1276 here

I've also noticed a scrollbar on the nav intermittently -- only on an external display 50% of the time on OSX + Chrome/Safari. Report above was on Linux + FF38 of the same.

2015-05-19-183004_310x784_scrot
@agjohnson agjohnson mentioned this issue May 23, 2015
Closed
untitaker added a commit to untitaker/sphinx_rtd_theme that referenced this issue Jun 5, 2015
@untitaker
Don't show scrollbar if there's nothing to scroll
a6382dc 
Fix readthedocs#200

Only tested with Firebug, didn't bother to install SASS.
@untitaker untitaker mentioned this issue Jun 5, 2015
Closed
@agjohnson agjohnson self-assigned this Jun 6, 2015
agjohnson referenced this issue Jun 19, 2015
@agjohnson
Add 3 + 4th levels to nav and more intuitive scrolling
b66be12 
Adds l3 + l4 nav menus, with more intuitive scrolling to make wandering the
additional nav menu items much easier. Resolves #25. Resolves #76.

* Reuses some styles for l3 + l4 navs items
* Nav interaction was changed to be more intuitive:
  * Nav is always sticky, doesn't scroll past end of content
  * Nav scrolls up immediately on window scroll events
  * Nav scrolls independently
  * Adds TOC expand plus links to the left of nav elements with children, these
    are added and update dynamically
  * Links in nav don't automatically scroll nav
  * Scrolling content will start scrolling nav again
  * Adds URL fragment handling to link and show current anchor links
@agjohnson agjohnson added this to the v0.1.9 milestone Jul 16, 2015
agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this issue Jul 17, 2015
@agjohnson
Resolve scrollbar visibility on navbar on long content
00bbb98 
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 issue Jul 17, 2015
@agjohnson
Resolve scrollbar visibility on navbar on long content
4539497 
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 agjohnson mentioned this issue Jul 17, 2015
Merged
@takluyver
Copy link

I've also just noticed this and gone to make a patch, but I was doing the same thing as #206.

It would be good to get some kind of fix in. If it's going to take longer to review a more complex approach like #215, maybe it's worth doing something like #206 as a stopgap measure. As I understand it, that would reduce the issue to only showing the unwanted scrollbar when the sidebar content is actually long enough to overflow the visible area.

@agjohnson
Copy link
Collaborator Author

I'm -1 on getting a release together with #206, #215 should be reviewed shortly.

You can always reference the branch directly if you wish to test out the fix immediately.

agjohnson added a commit to agjohnson/sphinx_rtd_theme that referenced this issue Sep 9, 2015
@agjohnson
Resolve scrollbar visibility on navbar on long content
db85a3b 
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 issue Sep 9, 2015
@agjohnson
Resolve scrollbar visibility on navbar on long content
60eb0af 
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
Assignees

@agjohnson agjohnson

Labels
None yet
Projects
None yet
Milestone
v0.1.9
Development

Successfully merging a pull request may close this issue.

Resolve scrollbar visibility on navbar on long content agjohnson/sphinx_rtd_theme
2 participants
@takluyver @agjohnson