I want to align the buttons in a UIGridLayout to be centered, but when there’s more than 1 row it doesn’t center anymore
6 Likes
Center treats the entire horizontal view as being centered. As you add more elements the total width of elements laid out increases, so it has to use the largest horizontal size in centering.
I think you want the 4th element in the first screenshot to go to the center, could you explain the use case here?
For this UI, I would like the second row to still be centered
2 Likes
why is centered in this particular UI useful? I don’t doubt it, just trying to understand the entire use case
1 Like
For aesthetics, I think it would look better to have even spacing on either side of the 4th element instead of it being aligned to the left
2 Likes
You can achieve this pretty easily by using a combo of UIListLayouts. I’ve attached an example of how to do this.centergridex.rbxl (21.8 KB)
5 Likes
If this were to be changed, it would need to be a new property instead. Fixing this would be good in some cases, but would break some of my UIs.
For example:
If the current behavior were to be changed, the 3rd row would be centered, which I don’t want. But, adding a new property to UIGridLayout that does this would be good, so that it doesn’t change any existing UIs.
I’d prefer second row be centered like the first row so that the menu id displayed in a consistent way as items are added or removed. Using a list of grid layouts, or list of lists sounds like a hacky solution that I would rather not resort to.
A link to my recent bug report that I made without knowledge of this report:
1 Like
Hacky solution, it works. But I think it should be possible with the UIList or UIGrid alone. It will be a lot more user friendly that way. Let’s say you don’t know how many rows there will be? That is why the default game engine functionality would be nice to have added.
(Sorry for bumping this old thread, but this topic is still relevant.)
1 Like
bump
i need this for my current ui (had to use hacky way, pls just add a option)
This should probably be a feature of UIGridLayout.
I understand it’s possible to do the same with a combination of UIListLayout, but it’s way more convenient if it were directly in UIGridLayout.
In most cases (scrolling frames with content like an inventory), the current behavior is expected. Those uses cases can also get away using HorizontalAlignment at Left or Right. I’m not disputing though that sometimes Center is a convenient option, however it’d be more logical to have Center actually center elements on the other rows, than not having the option to. There are use cases where I’d expect the UIGridLayout to essentially be a 2-dimensional size-constrainted list layout.
Here for example, I am displaying items above a chest of what it contains. However, this isn’t very visually appealing and feels very unbalanced:
I can get a much more satisfying composition when my items actually center themselves.
This is absolutely doable already, but all UI constraints are here for convenience. They’re all things we can do with lua directly, but they exist to save time.
In my opinion, we ideally would need a new property for this. It’s too late to be modifying the current behavior and I know for sure a lot of games wouldn’t appreciate this change. My suggestions are:
HorizontalContainerAlignment / VerticalContainerAlignment: Centers the entire container. Works the same as right now
HorizontalElementAlignment / VerticalElementAlignment: Centers the elements within the container. This is where we can center items within the container, on all rows.
Those property names are relatively long, but they’re necessarily long because we don’t have an Anchor Enum (TopLeft, TopCenter, TopRight, LeftCenter, Center, RightCenter, BottomLeft, BottomCenter, BottomRight), which essentially turns them into:
ContainerAlignment: Centers the entire container.
ElementAlignment: Centers the elements within the container.
A long Enum isn’t very convenient when designing, but it’s easily represented this way:
That is it, I should probably do a feature request with this instead 
5 Likes
A few days it has been fixed 