Horizontal scrollable and centered buttons

+1 vote

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

in Engine by (99 points)
edited by

1 Answer

+2 votes
Best answer

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
enter image description here

Change PanelContainter's min size property as your desire
enter image description here

then you choose Layout of PanelContainter

enter image description here

the result
enter image description here

by (316 points)
selected by

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

by (99 points)
edited by

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

enter image description here
if enable Vertical expand option, the result like the below
enter image description here

by (316 points)

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

by (99 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webma[email protected] with your username.