Skip Navigation
Godot @programming.dev
TheOfficial @programming.dev
Solved

How can I make scrollable sidebar that grows with its contents?

Solution: the scrollable container was also scrollable horizontally! I had to disable that and it finally expanded to the size of its contents.

Hi,

I found out Godot can be (ab)used to make a cross platform GUIs for applications and would like to make a window with a main container on the left and scrollable feed on the right. The scrollable feed should expand horizontally (max 20% of available space) depending on the size of the contents it has.

I've split the main GUI using an HBoxContainer with a VBoxContainer on the left (mainContainer) and a ScrollContainer (feedScroll) on the right with a VBoxContainer in that. When setting "Expand = true" on mainContainer, it just pushes aside the feedScroll which then has width of 0. The buttons have a min size, so I expected them to widen the vBoxContainer and succeedingly the feedScroll. Alas, the VBoxContainer does have the right width (as you can see in the image), but the feedScroll doesn't have a width.

Below is the scene.

 ini
    
[gd_scene load_steps=3 format=3 uid="uid://c1jga0ql8cbyx"]

[ext_resource type="Script" uid="uid://ceyrteq5kukei" path="res://button.gd" id="1_80edf"]

[sub_resource type="CanvasItemMaterial" id="CanvasItemMaterial_k6omp"]

[node name="gui" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2

[node name="rootMargin" type="MarginContainer" parent="."]
material = SubResource("CanvasItemMaterial_k6omp")
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
theme_override_constants/margin_left = 10
theme_override_constants/margin_top = 10
theme_override_constants/margin_right = 10
theme_override_constants/margin_bottom = 10

[node name="HBoxContainer" type="HBoxContainer" parent="rootMargin"]
layout_mode = 2

[node name="mainContent" type="VBoxContainer" parent="rootMargin/HBoxContainer"]
layout_mode = 2
size_flags_horizontal = 3

[node name="feedScroll" type="ScrollContainer" parent="rootMargin/HBoxContainer"]
layout_mode = 2

[node name="VBoxContainer" type="VBoxContainer" parent="rootMargin/HBoxContainer/feedScroll"]
layout_mode = 2
size_flags_vertical = 3
theme_override_constants/separation = 10

[node name="Button" type="Button" parent="rootMargin/HBoxContainer/feedScroll/VBoxContainer"]
custom_minimum_size = Vector2(200, 30)
layout_mode = 2
size_flags_horizontal = 4
size_flags_vertical = 4
text = "I have a lot of text"
script = ExtResource("1_80edf")

[node name="Button2" type="Button" parent="rootMargin/HBoxContainer/feedScroll/VBoxContainer"]
layout_mode = 2
text = "This is a marginal text"

[node name="Button3" type="Button" parent="rootMargin/HBoxContainer/feedScroll/VBoxContainer"]
layout_mode = 2
text = "I have more text in here"

[node name="Button4" type="Button" parent="rootMargin/HBoxContainer/feedScroll/VBoxContainer"]
layout_mode = 2
text = "Quite a big button lad"

[connection signal="pressed" from="rootMargin/HBoxContainer/feedScroll/VBoxContainer/Button" to="rootMargin/HBoxContainer/feedScroll/VBoxContainer/Button" method="_on_pressed"]

Help would be appreciated. Thanks

Comments

2