Eliminate Duplicate Vertical Scrollbars in Fixed Boards

[RodriSanchez1]

On “Fixed Boards” pages we’re seeing two vertical scrollbars side-by-side. Only a single scrollbar should appear.

The main idea of fixed boards is to have no more than one page. However, some users like and use fixed boards with a scroll. A scroll is active if the user exceeds the page size ( columns and rows defined in the edit board). But we are seeing 2 scrollbars.

One easy way to reproduce this:

• Go to a folder of our default Cboard Classic Board. For example => (Sports)
• Unlock and press edit the board
• Enable the "fixed" switch on the Edit nav bar
• Reduce the board size to 2 columns
• No you can see the scroll in a fixed board.

Affected device:

This issue was encountered on Chrome and chromium based web browsers on Windows OS.

[katrinechow]

@RodriSanchez1 - Hello! I would like to look into this bug further. I am a new contributor here. May I be assigned to this issue?

Also, are there steps to reproduce this bug and/or device information I should be aware of?

Thank you so much! This is a really cool project and I'm looking forward to help however I can!

[tomivm]

Hey @katrinechow! Welcome to Cboard!! I added the steps to reproduce it. But I can't reproduce it. I am on macOS and maybe it appears only on Windows OS. Please @RodriSanchez1 can you explain more?

[RodriSanchez1]

@katrinechow Hello! I just updated the way to reproduce it and the device where I finded! Let me know if you have any doubt

[katrinechow]

Thank you! I'll spend some time taking a look!

[RodriSanchez1]

Sure thing! Take a look on this css class

.Board__tiles {
    position: relative;
    height: 100%;
    z-index: 4;
    flex: 1 1;
    background: #fff;
    direction: ltr;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

I think the overflow-y: scroll; needs to ve removed and placed on the class=Grid div

[katrinechow]

@RodriSanchez1 - Thanks for the tips! This solution seems effective when testing on Chrome browser on Windows 11:

1. Remove overflow-y: scroll from .Board__tiles
2. In .BoardSideButtonsContainer, flip overflow-y: hidden to overflow-y: auto

I am new to Javascript and web dev in general so this will be a silly question - Is there any reason we should keep overflow-y on scroll instead of auto?

I will run a few more tests on other browsers / OS this week and submit a PR for review! Appreciate your guidance, it was fun looking at the source code and learning how everything works :)

[RodriSanchez1]

Awesome! Glad to hear you're enjoying diving into the Cboard code. Remember to test the solution on both Fixed and Fluent boards, with a single page as well as with two or more pages.

Regarding your question:

Is there any reason we should keep overflow-y set to scroll instead of auto?

When you set overflow-y: scroll, the browser always displays the scrollbar, whether it's needed or not. This reserves space for it, which helps make the transition between boards smoother. Without it, you'll notice the tile widths shift between boards that have a scrollbar and those that don't

[muhammadali-se]

hi @RodriSanchez1 @tomivm is this issue fixed? I'm interested in this issue.

[Aqueuse]

Hi devs, this seems to be fixed now. Am I right ? Can you close the issue ?