Skip to content

Add Simple Horizontal and Vertical Content Alignment to ScrollContainer #13421

@KnifeXRage

Description

@KnifeXRage

Describe the project you are working on

A 2D Game with lot of Scrollable UIs.

Describe the problem or limitation you are having in your project

I got problem in Aligning stuff in a ScrollContainer. Size flags on child nodes can do it, but they’re super hard to find and confusing, especially for beginners. I didn’t even know they existed until after I made this feature!

Describe the feature / enhancement and how it helps to overcome the problem or limitation

I Added two properties to ScrollContainer:

  • horizontal_content_alignment (Left, Center, Right)
  • vertical_content_alignment (Top, Center, Bottom)

They let you align content right in the Inspector with a dropdown. It’s way easier than messing with flags or code, saving time and making UI design beginner-friendly.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

It adds two new options in ScrollContainer inspector panel: horizontal_content_alignment and vertical_content_alignment which helps us to easily align contents in ScrollContainer.

Here is Demo:-

Scroll.Container.Content.Alignment.Feature.mp4

See my PR here: #112200

If this enhancement will not be used often, can it be worked around with a few lines of script?

You can use size flags or GDScript to adjust child positions, but it’s fiddly and not obvious. This feature makes it a quick Inspector tweak, which is much simpler.

Is there a reason why this should be core and not an add-on in the asset library?

This makes ScrollContainer easier for everyone, especially new users, right out of the box. It’s a small, core UI improvement, not something that needs an add-on.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions