How to keep Frame attached to edge when resizing CanvasGroup

[KinderHSPVA]

Hello,

So I’ve been trying to size windows properly over the last few days (if that makes any sense) and I’ve come across an issue. I have a frame in a canvas group that won’t resize properly. It keeps going out of the screen or becomes too short and it is possible to see the stuff behind.

I want this whenever I scale it:

Not this:

In the second image, you can see that there is some white space at the bottom that won’t stay locked to the bottom of the CanvasGroup.

Any help is appreciated, and if you need more clarification on anything (as my explaining was a bit odd) I will be happy to do so!

Thank you,
Robyn

[batteryday]

Ensure that you are using Scale and not Offset for all the relevant frames.

[KinderHSPVA]

Yep I am using scale. It just does that and I have no clue why.

[VegetationBush (FartedWayTooHard)]

Are the black bars on the edge individual frames or is that the background?

[KinderHSPVA]

Oh, my bad, the blue rectangle was just testing, and is just a frame inside of WindowContent.

[VegetationBush (FartedWayTooHard)]

If you want the blue rectangle to always have consistent padding on the edges, you have to make use of both scale and offset. For example, if you want the padding to be 50 pixels on each side, you can set the position to 0, 50, 0, 50 and the size to 1, -100, 1, -100.

[KinderHSPVA]

Yes, but the WindowContent frame needs to be attached to the topbar, will that still work? (It’s also attached to the bottom, left, and right.)

[VegetationBush (FartedWayTooHard)]

I have no idea what that means. Can you please provide a diagram that shows what you want to achieve?

[KinderHSPVA]

Yes, sorry.

I need the “WindowContent” frame to consistently stay underneath the top bar, (the gray bar with the text and three circles) and stay locked to the sides of the CanvasGroup, and bottom. (If that makes any sense)

Edit: I want it to consistently stay in that position, as well as act like this:

Edit 2: Nevermind, I got it working by modifying:

@VegetationBush

you can set the position to 0, 50, 0, 50 and the size to 1, -100, 1, -100

Thank you!

[VegetationBush (FartedWayTooHard)]

Sorry, I’m still confused about what the problem is . I’d advise reading through this tutorial to see if it helps your case:

Tips to Position and Scale UI

You’ve probably seen many threads about, “How do I fit this on PC and Mobile?”, “How do I make UI scale evenly across all devices?”. Well, if you have these problems, you’ve come to the right place. Here I will show and explain some concepts for fixing those problems. But first, let me explain a few concepts: What is Scale and what is Offset? Scale is a measurement that Roblox uses to determine a percentage from one distance to another. Let’s say the screen size was 1000px wide, having a scal…

If it doesn’t help, a little more elaboration would be nice. It would help if you took screenshots of how your UI should look at varying screen sizes, as well as the current state of the UI so I can diagnose the issue and propose a solution. For example:

[KinderHSPVA]

Read:

@KinderHSPVA

Edit 2: Nevermind, I got it working by modifying:

@VegetationBush

you can set the position to 0, 50, 0, 50 and the size to 1, -100, 1, -100

Thank you!

Your post has been marked as the solution.