FAQ sidebar can't scroll separately

[jennydove]

Steps to reproduce on FAQ page:

1. Have the window height be less than the length of the full page
2. Be curious about what the bottom-most question is
3. Try to scroll the navigation bar down to the bottom question
4. Instead find yourself needing to scroll the entire FAQ content

Potential solutions:

• Make each question on the right side expandable and begin collapsed so they all appear on the right side and the navigation isn't necessary
• Actually create two scroll areas for both the content and the navigation
• Have some form of down arrow on the navigation pane so people can jump down (probably my least favorite)
• Look at analytics and decide not enough people are looking at FAQs to warrant a fix (I don't know where our analytics are so I can't verify this myself)

[cjyabraham]

This page shows the second solution you suggest. You'll need to probably reduce the height of your browser to see how the left-pane scrolls independent of the right. Perhaps we may be able to implement that.

Here's another possible solution: I've removed the "Table of contents" at the top and reduced the length of some of the questions. The full list now fits on my 15" laptop screen. Any thoughts?

And I've opened a related issue.

[jennydove]

I'm on a 13" so I don't need to resize much 😅. The two-pane scroll does the trick - the only amendment I would have is it needs a little more padding at the bottom because the last question gets a bit cut off:

[image: image.png]

On Mon, Aug 3, 2020 at 8:55 PM Chris Abraham notifications@github.com wrote:

This page https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/program/colocated-events/ shows the second solution you suggest. You'll need to probably reduce the height of your browser to see how the left-pane scrolls independent of the right. Perhaps we may be able to implement that.

Here's another possible solution: I've removed the "Table of contents" at the top and reduced the length of some of the questions. The full list now fits on my 15" laptop screen. Any thoughts? [image: Screen Shot 2020-08-04 at 10 44 16 AM] https://user-images.githubusercontent.com/463160/89247406-da2eb800-d63f-11ea-8be3-a562c84d737a.png

And I've opened a related issue https://github.com/lfph/lfph.io/issues/77.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/lfph/lfph.io/issues/76#issuecomment-668350883, or unsubscribe https://github.com/notifications/unsubscribe-auth/APBTCLASQHZMJTOHQT2Y4R3R652DXANCNFSM4PT4UEGQ .

[thetwopct]

• The current solution is very lightweight, only using CSS3, but not advanced enough to handle complicated things like detecting overflow.
• Screen sizes below 615px in height should adopt a static top nav, so the sidebar nav should scroll with the page so shouldn't be an issue.
• The sidebar itself doesn't display until a users window is 800px width.
• As the current content on the page is (looks like number of FAQ items has been reduced since this was posted?) it currently should be a very small amount of users who have issues (who have a window of a height of around 620px and a width of between 800-900px).
• Removing the table of contents title or even changing font size only really works for an additional one or two items.
• I don't think there is a wish internally to change the structure of these sidebar pages.
• Using only CSS, position: sticky + overflow scrolling is not compatible, so would require a JS solution.

I've worked on that today along with a few other scroll/hash issues https://github.com/lfph/lfph.io/pull/78

[thetwopct]

Test of new solution https://pr-78-lfph.pantheonsite.io/join/faq/

[jennydove]

Looks awesome. My favorite is "what the FAQ"

[cjyabraham]

What do you think of including a shadow once the sidebar is scrolled down to suggest it can be scrolled up, as done here:

[cjyabraham]

@jennydove James has fixed this and I've just deployed it. Would you play around with the FAQ again and reopen the issue if not ok please?