Fix last narrative scroll issue 578 #653
Conversation
There was a problem hiding this comment.
Thanks @emmahodcroft -- I can't test, but this hasn't broken anything on OS X.
re: the blue dots bunching on the left. This is a bug and shows up on iPhones, but not on my laptop so it's hard to fix. Would you mind having a go at this?
re: long narrative paragraphs that scroll off the page, this is a known bug and will be fixed in a future commit.
src/components/app.js
Outdated
| @@ -219,6 +220,7 @@ class App extends React.Component { | |||
| <Narrative | |||
| height={availableHeight - narrativeNavBarHeight} | |||
| width={sidebarStyles.width} | |||
| style={{overflow: "hidden"}} | |||
There was a problem hiding this comment.
I think this line is a red-herring. At least for me, it doesn't make a difference.
There was a problem hiding this comment.
Yes, this must have been a hangover from a different idea I tried first. I'll remove it.
src/components/app.js
Outdated
| @@ -185,7 +185,8 @@ class App extends React.Component { | |||
| height: availableHeight, | |||
| width: sidebarWidth, | |||
| maxWidth: sidebarWidth, | |||
| overflow: "scroll", | |||
| overflowY: "scroll", | |||
| overflowX: "hidden", | |||
There was a problem hiding this comment.
The use of the scroll value is what forces the browser to display a scrollbar, even if it's unnecessary. By switching this to overflowY: "auto", we can have the browser only display a scrollbar when there is sidebar content to scroll (e.g. on a page like https://nextstrain.org/zika) and not display one when there isn't (e.g. on a narratives page).
Does that make sense / work for you?
|
@jameshadfield I made a new issue for the blue dots and will have a go :) |
|
@jameshadfield Will you re-test the new changes on macOS? |
|
Certainly. Is this now working on linux and windows? |
|
I believe so. |
|
👍 |
Should hopefully fix the last remaining bit of issue 578
I get the 'tiny useless scroll bar' in IE, Edge, Firefox, and Chrome on Windows 10.
This should hopefully fix this. The scroll bar is still there in Chrome, IE, and Firefox, but it greyed out:
(Chrome)
However in Edge it is full-length (doesn't scroll that weird tiny bit), but is still selectable - that's why it's dark-grey below:
I haven't checked how this impacts long narrative paragraphs that scroll off the page, or mobile. Checking that this fixes it on Linux and doesn't impact how currently viewed in OS X would also be good!
(Also note in IE and Edge the blue dots all cluster to the left... but I don't know if this is an 'issue' - it doesn't really impact functionality.)