Make vertical scrollbar visible in forms
Katie Choy
The scrollbar is not visible on ClickUp forms, which creates a (very irritating) challenge, accessibility issue, and poor UX for many users. It appears in the code that scrollbars are set to match the color of the form background, which is an...interesting choice. These need to be visible by default so users without a mouse (or using screen readers) can easily scroll to see overflow content.
Log In
L
LC Dev
Here's what my proposed solution would be:
Not sure what language the platform is writtenbut assuming it's a mix of javascript/typescript and react, they would:
- Add a toggle switch under the form settings (easy if it's javascript/react)
- Add a slider for the scroll bar width (javascript/react)
- Create a hook based on the form ID
- Add the CSS to the form's stylesheet file for the visible/not visible and the width of the scroll bar
- Use either a switch or an if statement on run/load/display to show or hide the added CSS (1 for the hide toggle, one for the slider width)
- Enable or disable the scroll bar width code depending on whether the toggle switch shows it or not.
If they happen to be using jQuery, the CSS might be something like:
REMOVE "overflow-y: hidden;" from the form container's css
ADD
`/
Chrome
/.formDiv::-webkit-scrollbar {${[SOMEVAR]}; (would be "" to show or = "\n display: none" to hide)
}`
/
IE
/`.formDiv::-webkit-scrollbar {
${[SOMEOTHERVAR]}; (would be the number the slider produces)
}`,
and for the width, it would be something like this:
`.formDiv::-webkit-scrollbar {
width: ${[SCRLWVAR]}em; /
"SCRLWVAR" is the number set by the slider
/}`
The `s are intentional because they would have to be strings you can pull in and out of the CSS, but this can be added to the component/page directly, so they don't have to modify a huge CSS file in the process.
They know their code, but I think it would look something like this to implement. They'll know how to plug this in after looking at it.
S
Sabrina
Agree!!! This is incredibly irritating. Many users would just leave if they can't figure out how to scroll. Hard to understand why this would ever be a design decision.
S
Sabrina
Since posting about this last month, I have had several visitors to our form tell me that they couldn't figure out how to scroll, so they abandoned it.
I imagine there may not be many form users to upvote this, but it's a basic UI function which ClickUp has designed in a nonsensical way, and one that seems like it would be an easy fix in CSS.
How can this issue be escalated?