Need bigger ScrollBar for mobile

ondesic

One of the biggest hurdles I have ran into is the built-in Scrollbar attached to TextEdit, RichTextLabel and other controls. Though the skinny scrollbar is not an issue on a desktop, on a mobile device it can ruin the entire app as it is too small to use with a finger.

I have searched google, github issues, github proposals and haven't been able to find a solution. I have tried a few things suggested, but there are always bugs with each.

Here is what I have tried to no luck: (1) Create a Theme and add class Vscrollbar. I change the Grabber to styleboxflat and change ExpandMargin|Left to 20. I create rounded border corners. Here is what I get: Though this may look nice and thick, it is only visual. When I try to click on it, only the small original area to the right is actually usable. If I click anywhere else on the new thick grabber, it selects the text in the TextEdit.

(2) I have also tried getting the TextEdit's VScrollbar through code and changing the scale (I have to get each child of the TextEdit until I find the VScrollbar.) This looks good, but content margin in the TextEdit doesn't change to the new size of the scrollbar. The new thicker scrollbar partially covers the text: With a TextEdit I have to manually and individually change the ContentMargin|Right to make it not overlap. The problem is this option may not be available for all nodes with a scrollbar, as well as it is cumbersome.

Is there something I am missing or is there an easy way to change the width of scrollbars so that it functions as expected with each node?

Calinou

Create a Theme and add class Vscrollbar. I change the Grabber to styleboxflat and change ExpandMargin|Left

This is expected; Expand Margin does not affect an item's clickable area. Instead, you need to adjust Content Margin.

ondesic

Thank you Calinou, I can't find documentation that states this, however, it looks like the "Scroll" stylebox is the most important part of the equation. I was trying to change the content margin of the grabber stylebox. Nothing happened. Apparently the changes don't show unless you change the content margin on the Scroll stylebox as well.

Even after changing the content margin, here is what it looks like:

Unfortunately, this is still only a Band-Aid. The words of the TextEdit are still covered by the scrollbar. Now you must create a separate stylebox for the TextEdit and adjust its content margin or get the stylebox by code and change the marginpadding.

IMHO wouldn't it be so nice to just have a property called "vscrollbar_width", "hscrollbar_height" on all Nodes with scrollbars. When changed, it adjusts the content of the children in the node to the correct size?

Calinou

Unfortunately, this is still only a Band-Aid. The words of the TextEdit are still covered by the scrollbar. Now you must create a separate stylebox for the TextEdit and adjust its content margin or get the stylebox by code and change the marginpadding.

If you make the scrollbar background transparent (StyleBoxEmpty can be useful here), it should be less of an issue. This is how modern applications like Chrome and Windows 10 render scroll bars anyway :)