Is there a way to change the alignment of items inside of a frame?

I’m trying to make a spectator GUI using a next/previous button. I want to have the “previous” button aligned just as far from the left border as the “next” button is from the right border. See:


As you can see, the right-side button is not aligned very well. I don’t know how to make the right side aligned equally without going to the decimal places to make an (un-exact) equal alignment. I’ve looked through the properties but I can’t find it. I’m trying to do something similar to this:
image

1 Like

Try using scaling rather than offset if you aren’t already, since scaling allows you to snap your guis to a grid and move them more accurately. If you haven’t already (although I’m assuming you have) you should parent your buttons to the frame since this is a better way to make buttons equidistant from the border.

To use the scaling property you just only edit the first values of each Udim2 column,
so do {1,0} rather than {0,1}

2 Likes

I am using scale, and, in fact, have never once used offset. The buttons are indeed parented to the frame.

1 Like

then I don’t see your issue here? the buttons in that screenshot look like they are both the same distance from the border.

1 Like

Not on all platforms.

1 Like

Is your frame using scale as well?

Edit: you are using a UIAspectRatioConstraint, this might be messing up the position that you set

2 Likes

Wait, whoops, that was a mistake. It does look the same, sorry for the misinformation. I must’ve used Ctrl+Z without thinking. Although the larger question I’m asking is this: is there an alignment property like there is for the text in TextLabels and TextButtons? It’d make aligning much easier.

Yes, there is.

What is it then?

TextXAlignment, TextYAlignment

Was looking for those

1 Like

many of the Gui constraint objects have a property much like that such as AllignLeft, AllignRight, or AllignCenter.

what I mean by Gui constraints is the following class of objects: Roblox Blog - All the latest news direct from Roblox employees.

note that these properties allign the positions of the frame/Gui object itself, not the text.

does this answer your question?

1 Like

That does not exist for items relative to a frame as a whole. I’m using an ImageButton.

I’m working on it right now, I’ll put an edit here if it does. Thanks for the info.

So far the UIGridLayout seems to be the only way to do it, but even that is presenting new problems. I’ll have to do more research into how the properties of this particular layout editor work.

Set the AnchorPoint to 1,0 to make it align to the top right

1 Like

Short answer - no, with the exception of text as seen below.
image

Long answer - yes, with a bit of coding in the command bar if you don’t have to tween it to that position. Basically, all you have to do is get the ‘x’ scale by subtracting the size scale of the box from 1 (which is the far-right side) and then subtract it by the offset of the ‘x’ scale on the left side that you moved the other box from 0. That’s about all you can do. If you have to do it in the tween, just tween it to that position.

EDIT
I didn’t realize how little detail I went into with the tween service part… Tween it to the ‘x’ scale position in the tween service with the same algorithm I detailed above. Sorry for the little detail the first time!

Did not work, thanks for the reply though

Once you change the AnchorPoint, the coordinates of each Frame will be relative to that point. You may need to adjust or reset these values to get the desired result.

I would suggest anchoring the two Frames to the centre of the semi-transparent Frame. I believe you can do this by setting their AnchorPoint to (0.5, 0.5). After applying the new AnchorPoint, coordinates (0,0,0,0) would be the centre of that Frame. You can add or subtract values on the x-axis to move the Frames to your desired position.

For example, you could set FrameA’s position to (0, 0, 50,0) and FrameB’s position to (0, 0, -50,0). This would make the empty space on the far side of each Frame equal.

What is the Anchor Point for the right image?

If the first number isn’t 1, then set it to 1 and reposition. That should fix your scaling problem.

By setting the right side button’s AnchorPoint’s X component to 1, and the position’s X Scale component to 1, it seems to have placed correctly.

Also, sorry for the late response. I haven’t worked on this in a few days.