GUI goes beyond the screen

[Terrosort]

- normal
- wrong

as you can see on the second screenshot, the gui kinda goes down with the size of the screen. And yes, plugin doesn’t quite fixed this problem

[Polygonizised (poly)]

You can use IgnoreGuiInset here to make the GUI ignore the topbar.

[uvic1rn (Sarah)]

Here’s a short tutorial on how positioning works.

In Roblox, UI elements like frames are positioned from the top left.

You’re probably familiar with a UDim2. There are two components to a UDim2:

• Offset
  An amount in pixels.

• Scale
  Represents a certain proportion of the size of the element’s parent. For example, an X scale of 0.5 means 50% of the element’s parent’s size in the X direction.

Here’s an example. Blue is the scale, and purple is the offset. The blue part of the position changes with the size of the box’s parent, but the purple part stays the same.

Now, remember when I said that UI elements are positioned from the top left? I lied. UI elements are positioned based on their AnchorPoint. So, for example, here’s the same box from earlier with an AnchorPoint of 1, 1:

The position of the cross (the box’s Position property) has not changed, but the box is now outside of the viewport. This is because the element’s anchor point is now in the bottom right.

The anchor point can be anywhere within the box. An AnchorPoint of 0.5, 0.5 would make the cross be at the center of the box. An AnchorPoint of 0.5, 1 would put the cross at the bottom and in the center:

Again, the cross doesn’t move. It’s just that the box’s position relative to the cross (again, the box’s Position property) does.

Using this information, we now see that to position the button where you want it, we’ll have to use both AnchorPoint and Position.

We know we want the button at the center bottom, so our scale becomes 0.5, 1. We also know that we want it to be offset from the bottom edge a little bit. We’ll give ourselves 16 pixels of padding, so our offset becomes 0, 16.

This is where our button is now. To add the finishing touch, we’ll need to change the AnchorPoint. We want it anchored to the center bottom, so our AnchorPoint also becomes 0.5, 1. Finally, our button is in the right place:

I hope this information is useful to you. Let me know how it goes

[Terrosort]

Thanks! Works perfectly now as I wanted.