Help to center a UI in a ScrollingFrame with UIGridLayout

[SOTR654]

Hello, so let’s say I have a ScrollingFrame with horizontal buttons, and I want the scroll to move to focus when clicked.

In this case the green button is the target, and I want it to be something like this after clicking it

---

The problem is that I don’t know how to calculate it, I tried using its position in the scroll, but it didn’t work. I also tried this post, but it didn’t work, because it uses scale and my scroll uses UIGridLayout, I tried to modify it, but it didn’t work.

[DataSigh]

Use a UIPageLayout with it centered to do something like this automatically

[SOTR654]

Although it works, it is not what I am looking for, since the buttons stop at each one, I am looking for it to be more free.

[HeyWhatsHisFace]

You should be using a UIListLayout for this instead of a UIGridLayout since you are running a horizonal list, not a grid. If you want the ease of having uniform cell sizes, set each frame’s Scale property (X axis) to a percentage of the ScrollingFrame size (for example, 0.2 for 5 buttons wide or 0.25 for 4 buttons wide) then set the Scale (Y axis) to 1.

To center a certain frame, you just need to find it’s relative positioning with the center, size, and absolute position.

Here’s an example:

function CenterFrame(ScrollingFrame:ScrollingFrame, TargetFrame:Frame)
	local ScrollingFrameAS = ScrollingFrame.AbsoluteSize
	local ScrollingFrameAP = ScrollingFrame.AbsolutePosition
	
	local TargetFrameAS = TargetFrame.AbsoluteSize
	local TargetFrameAP = TargetFrame.AbsolutePosition
	
	local RelativeAP = TargetFrameAP-ScrollingFrameAP --We make the absolute position relative to the scrolling frame rather than the screen by subtracting the difference between the two. This needs to be calculated because the scroll position is always changing, which makes the rest of the frames move too.
	
	local Center = ScrollingFrameAS.X/2 --Calculate the center of the scrolling frame by cutting its width in half.
	local RelativeCenter = RelativeAP.X - Center --We need to make the center relative by subtracting the difference between the center of the scrolling frame and target frame's relative position within it.
	
	local Goal = ScrollingFrame.CanvasPosition.X + RelativeCenter --Our goal should be the current position with the addition of the relative center we just calculated.
	local AdjustedGoal = Goal + (TargetFrameAS.X/2) --The goal needs to be adjusted for half the width of the frame since anchor points begin positioning with the leftmost part of a frame rather than the center.
	
	ScrollingFrame.CanvasPosition = Vector2.new(AdjustedGoal,0) --You can tween this for a smoother effect. Just make sure that you set ScrollingEnabled to false before tweening the CanvasPosition to the AdjustedGoal.
end

[SOTR654]

Thank you very much! I used Grid to make them the same but it doesn’t matter, thanks for the help.