Fixing positioning of Dialogue UI element

Hi everyone, does anyone know how to fix this issue? Basically I have a dialogue UI, and under the top right corner there is a rounded box that will change color depending on some things that happen in the conversation. My problem is that the rounded box (which I have positioned using ‘scale’ property) moves to the wrong spot sometimes, depending on the aspect ratio of the screen:

Correct version in studio:
image

Incorrect version when the window is very wide:
image

Is there any way I can fix the position of the rounded box to be perfectly behind the dialogue box regardless of screen size? Here is my current setup in Studio, maybe I’m doing something wrong:

image

Use Autoscale Lite, if you havent already

Maybe scale one frame, then both, remove the constraint, and just keep testing

I hate when people recommend using AutoScale. AutoScale is very unreliable(unreliable is the wrong word. What I meant is that AutoScale doesn’t offer any methods for positioning). The only thing I would recommend using it for is UiAspectRatios.

Basically, you you want to put a frame inside your dialogue image and place your ui color instance in that frame. After that, you can use some UiListLayouts to place your object where you want it inside these frames.

When dealing with Ui you want to use scale and offset for size and Ui instances for positioning. Sure, this is more difficult, but it is 100x more reliable.

1 Like

I dont understand, Autoscale puts in a constraint and scales the GUIs with a few clicks
Whats so bad about that?

UiAspectRatio will maintain the same size on any screen, but AutoScale doesn’t offer anything to maintain positioning.

1 Like

Thanks. Moving the colored frame into the dialogue box image fixed the issue, although I had to change ZIndexBehavior to global so it rendered behind the dialogue box.