Changing the width of ScrollBars in Scroll Containers

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By StraightUpGruntled

How do you go about customizing the scroll bar in the scroll container. More importantly, how do you change the WIDTH of the bar! I know themes might work, but I have only used them a bit, and dont know how to use them to change the scroll container’s scroll bar size!

:bust_in_silhouette: Reply From: dimkadimon

I was wondering about this too. The only thing that sort of worked is:

get_v_scroll().set_scale(Vector2(1.5,1))
:bust_in_silhouette: Reply From: mistertabasco

I have found a hint in the documentation:

You can access all the parameters of the scroll bar like this:

# get_v_scrollbar() for the vertical scrollbar

$ScrollContainer.get_v_scrollbar().rect_size.x = 12 

To conveniently figure out all the possible parameters and methods I suggest you add an extra VScrollBar node to your project as an example.

:bust_in_silhouette: Reply From: Shlowpoke

This worked for me:

$ScrollContainer.get_v_scrollbar().rect_min_size.x = 50

Had to be the rect min size. Didn’t work with rect size. Couldn’t find a way to do it with theming, unfortunately.

Saved my day, this works for me, too :slight_smile:

SilvanaBanana | 2021-08-25 13:05

:bust_in_silhouette: Reply From: Awxen

For Godot 3.2 onwards, you can achieve this via theme in the following way:
Edit: might work for earlier versions, not sure.

First assign a theme to your scroll container node.

Add a class item in that theme: “VScrollBar”, V Scroll Bar appears in the property menu.

Click on “V Scroll Bar” and then click on “Styles”, here you can use a stylebox type of your choice. (StyleBoxTexture glitches out for some reason when you try to assign to it).

If you choose to go with styleboxflat, click on it to change its properties, here you can set the color, border color shape etc. Here, you will also find an attribute titled: “Content Margin”. Changing parameters under Content Margin allows you to change the breadth and height of your scrollbar. You might need to broaden “scroll” width in order for mouse hover to work in accordance to the width you have in mind.

1 Like