Scaling UI problem

[davidsusbus]

Making a Baldi game and testing some UI and wondering how to fix this problem.

When I have a “black border color” thingy to the left side here on this screen size, it looks fine.

But, when the screen gets wider, it ends up detaching from the main image like this.

Any solutions? I know realistically a player’s screen won’t be hugely wide but in the case that it is (my friend does have a widescreen monitor bigger than 1920x1080) I don’t want this UI bug happening because its quite uglyyyy!!!

[Viscxse (Viscose)]

|- Frame container (Size UDim2.fromScale(1, 1), parent ScreenGui preferably having GuiInsets = none)
 |- UIListLayout (no padding, sortmode LayoutOrder)
 |- Black frame on both sides (Order 0 and 2, size at your choice)
 |- Your image (Size UDim2.fromScale(1, 1), ScaleType Stretch, order 1)
  |- UIFlexItem (FlexMode Shrink)

should do.

actually you dont even need a flex item if you’re going to use all Scale. it is just there if your borders are going to be fixed (Offset).

[davidsusbus]

ok im very confused lol
I changed some of the UIListLayout settings and it never really seems to work, only either showing the left black frame or nothing. Sometimes when i stretch the screen (with the output tab) really fast I can see a glimpse of the image:

but then it just goes beneath the black frame once I’m done shaking it around. I have my LayoutOrder’s set up correctly so not 100% on what to do lol
also i do need a textbutton covering the whole screen, would i just do the same process basically?

[Viscxse (Viscose)]

@davidsusbus

but then it just goes beneath the black frame once I’m done shaking it around.

filldirection is horizontal, yes?

@davidsusbus

also i do need a textbutton covering the whole screen, would i just do the same process basically?

you can just have a button that’s sibling of the holder container, and set a zindex higher. not sure what you mean.

[davidsusbus]

oops sorry i had another setting wrong. Thank you though this worked!