Annoying double scrollbar

[juanfra684]

Describe the bug There are 2 scrollbars in https://docs.raku.org/language/containers. Attached screenshot.

To Reproduce Steps to reproduce the behavior:

1. Go to https://docs.raku.org/language/containers with a Chromium based browser or Firefox.

Expected behavior Only 1 scrollbar.

Screenshots .

Desktop (please complete the following information):

• OS: Linux
• Browser: Chromium based browser or Firefox
• Version: latest.

Fix? All works as expected when I disable height: 92vh; in <div style="height: 92vh; overflow-y: scroll; flex-grow:inherit;">, just bellow of <div id="main-column" class="tile is-parent" style="overflow-x: hidden;">. The code was introduced in the commit https://github.com/Raku/doc-website/commit/d7e875477df9f2b036b57b2a40df97b10ccb0fbd. This is the line: https://github.com/Raku/doc-website/blob/82a5fb4c5fa19d7460b599431802610507d225b1/Website/plugins/page-styling/page-styling.raku#L166

[finanalyst]

Good catch. Thanks.

FYI This is an updated interface and you are using it in the tablet or mobile mode (the hamburger is visible in the top right). There's been less testing in this format.

Thanks for finding a good fix. I'll deal with this as soon as possible.

On Tue, 19 Sept 2023, 00:00 Juan Francisco Cantero Hurtado, < @.***> wrote:

Describe the bug There are 2 scrollbars in https://docs.raku.org/language/containers. Attached screenshot.

To Reproduce Steps to reproduce the behavior:

1. Go to https://docs.raku.org/language/containers with a Chromium based browser or Firefox.

Expected behavior Only 1 scrollbar.

Screenshots [image: 1] https://user-images.githubusercontent.com/180453/268790640-40e67fbf-0e93-448d-9088-6bac0d1d48ad.png .

Desktop (please complete the following information):

• OS: Linux
• Browser: Chromium based browser or Firefox
• Version: latest.

Fix? All works as expected when I disable height: 92vh; in

, just bellow of <div id="main-column" class="tile is-parent" style="overflow-x: hidden;">. The code was introduced in the commit d7e8754 https://github.com/Raku/doc-website/commit/d7e875477df9f2b036b57b2a40df97b10ccb0fbd. This is the line: https://github.com/Raku/doc-website/blob/82a5fb4c5fa19d7460b599431802610507d225b1/Website/plugins/page-styling/page-styling.raku#L166

— Reply to this email directly, view it on GitHub https://github.com/Raku/doc-website/issues/300, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACYZHHLTOVOVSSTR6ZSZB3X3DG7LANCNFSM6AAAAAA45NHT7I . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[finanalyst]

Also is visible in desktop.

[finanalyst]

@juanfra684 This behaviour is not as simple as I thought. The problem is that when the height of the tile containing the main text is removed (which is your suggestion), then the contents panel, when opened does not stay fixed. By setting the height of the main tlie, the contents tile scrolls independently.

It would probably be best to make the rightmost scroll bar invisible. There are some fixes on stackoverflow, but they dont seem to work here.

Still working on this. The relevant SCSS is in Website/plugins/page-styling/scss/_themes-templates-common.scss

[donaldh]

Please don't try to hide the rightmost / outermost scrollbar. That's the scrollbar that gets the keyboard focus when you visit any page on the site. That's the only scrollbar you want on the page since it's the one that makes the page keyboard accessible.

I suggest that removing height: 92vh; is a good interim step to fix the double scrollbar problems. After fixing that, we can explore if there is a good way to have a separately scrollable content tile.

[donaldh]

The python docs seem to have more or less the right behaviour. E.g.

https://docs.python.org/3/whatsnew/3.6.html

From what I see there it's this combination of CSS properties on the sidebar that works:

float: none;
position: sticky;
top: 0;
max-height: 100vh;

I think if you apply that to div id="left-column" and apply overflow-y: scroll to div class="raku-sidebar" then the "Table of Contents" header and the filter box will remain static while the sidebar content will be scrollable.

[finanalyst]

@donaldh @juanfra684 I've just added a patch to fix this. @donaldh +1 for hints. It took a bit of fiddling to get something that worked with everything else. Please look at the concept site new-raku, eg. operators and see if the change works with your browser/OS.

[finanalyst]

@juanfra684 @donaldh This change should now be visible on doc-dev. Feedback would be welcome before the change goes to the production site.

[donaldh]

The concept site works well and seems to completely solve the issue. The docs-dev site still has the double scrollbar for me.

Tried in both Safari 16.5.1 and Chrome 119.0.6045.159 on macOS

[finanalyst]

@donaldh synched deploy and docs-dev. works for me now. closing as completed

[juanfra684]

I've been without Internet for like two months and couldn't reply before of the final commit. Thanks for the fix! all works fine now.