Horizontal scrollable and centered buttons

Question

I want to create a panel that horizontally centers the buttons within it. If the screen width is not enough for all the buttons, then the panel should be horizontally scrollable

Currently, I have the following node hieararchy:

+ PanelContainer
    + ScrollContainer
        + HBoxContainer
            + Button 1
            + ...
            + Button n

The ScrollContainer has a full rect layout and the HBoxContainer center layout

This is not working, however. The buttons end up on the left side of the screen even though they are centered in the editor.

What am I doing wrong here?

Basically, I want the buttons to be horizontally centered and if there are too many buttons to fit on the screen horizontally, then the user should be able to scroll horizontally to view the off-screen buttons

Answer 1

I think you can add Control node and move PanelContainter to child of new Control Node. Because PanelContainter's chilren does not has Layout option

Change PanelContainter's min size property as your desire

then you choose Layout of PanelContainter

the result

Comments

Thanks for the response, TyTYctA, but when there are few buttons (one or two, for example) then the buttons are not centered horizontally... they appear on the left side. Basically, I want the buttons to be horizontally centered on the screen and if there are too many buttons to fit on the screen horizontally, then the user should be able to scroll horizontally to view the off-screen buttons

---

you need enable Horizontal expand option of size Flags of HBoxContainer for centering in ScrollContainer

if enable Vertical expand option, the result like the below

---

That did the trick. Thanks, TyTYctA. You rock! :)