How will i make a child frame match the size of its parent of parent frame

[computerph1_DEV]

I was designing a progress bar to display the Speed of a vehcile, and im using UiCorner for the rounder corners. But, the ui corners doesn’t clip its descendents. So, i tried to make a workaround. I tried to make the parent frame (name it frame 1) size in offset (pixels) and the child frame (frame 2) size in scale, then its child (frame 3) the size in offset same to frame 1.

The problem with that approach is that its small in offset size, and if using scale, the entire thing breaks.

For using scale size for frame 1, i tried resizing frame 3 by its AbsoluteSize

code

script is placed in frame 3

local RunService = game:GetService("RunService")

local frame3 = script.Parent
local frame1 = frame3.Parent.Parent

RunService.RenderStepped:Connect(function())

   local frameSize = frame1.AbsoluteSize
   frame3.Size = UDim2.new(0, frameSize.x, 0, frameSize.y)

end)

The following code doesnt work for me, any help is appreciated.

[TortenSkjold]

Have you considered putting a UICorner on the progress bar itself aswell?

[computerph1_DEV]

No, i want a style like this

The container should have a rounded corner, i dont want the progress bar to be rounded, in html and css, it works cause css clips the corners also, but in roblox i use a workaround which only works if the container is in offset size

[computerph1_DEV]

Railway CHAOS!

In the train gui, the throttle meter is the style i want it uses offset container method, so in some screen is small or big.

[TortenSkjold]

Not quite sure what your goal is, but I think you’re approaching this the incorrect way. The only UI element that is locked(to my knowledge) with using only offset is UIStroke.

As far as I understand, you wish your UI to scale correctly on all devices?
If so in what way?

Do you have any pictures of your current setup? It is hard to imagine your issue with only text.

This was achieved with only UI elements(besides star pattern), and uses scale for all devices, with added pixels to compensate for smaller screens.

[computerph1_DEV]

The current setup is the game you were on the train ui, only the ui cointainer should have ui corner, and i forgot to say also the frame 3 also have ui corner.

[TortenSkjold]

In what way does the thing break, whenever you try to use scale instead of pixels?

[computerph1_DEV]

Like, the progress bar thing doesn’t show up upon a certain progress

[TortenSkjold]

Could you try and push a update with scale, so I can take a closer look?

[computerph1_DEV]

Ill tell how :

Make frame 1 with size scale 0.5, 0.5 and center it (offset method : offset a fixed amount)

Make frame 2 with scale size 1,1

Make frame 3 with offset size of offset method used in frame 1 even frame 1 is on scale method if using offset here it breaks

[computerph1_DEV]

I couldnt update now as im in mobile, i could update later this day or maybe now (my laptop has a problem wher it sometime boots and womtimes WHEN MOOVED A LIL, battery disconnects and dead, have to reconnect the battery and sometime it doesnt charge .–.)

[TortenSkjold]

The best thing would be if you exported the GUI in scale format, so I could take a in-depth look at where the issue lies and in what way it stops working.

[computerph1_DEV]

Im updating the game right now, my laptop has started up, if you want more detail, ill export the progress gui
be sure to see last updated, if it was today, then the throttle ui shoule have its container scaled, also im going to make a new script to try and fix the issue

The issue

[Sleazel (Malcolm)]

Your approach is correct, but for this thing to work you should change the size of the frame2 and not the frame3

Here is the rundown:

Frame 1:

• Set it to whatever size you need in offset (not scale).
• Has UICorner as a child.
• Does not clip descendants.

Frame 2:

• Has the AnchorPoint set to {0,0.5}
• Has the size in scale {0,0,1,0} adjustable up to {1,0,1,0}
• Has the position in scale of {0,0,0.5,0}
• Clips descendants.
• Does not have UiCorner as a child
• Is transparent.

Frame 3:

• Mirrors frame 1 in size,
• Position is set to {0.5,0,0.5,0}
• AnchorPoint is set to {0.5,0.5}
• Has a copy of UICorner with the same settings as Frame 1.

Whenever a speed is changed, your code should adjust frame2 size only:

frame2.Size = Udim2.new(speed/maxSpeed,0,1,0)

[computerph1_DEV]

that’s not the issue, i want the frame 1 to be in scale and it to still work, cause the ui will be small or else

Also your this solution is in my game already, but i need scale size

i have managed to solve it, heres the new script for what i did for making it work

local Throttle = script.Parent.Parent.Parent

Throttle.Changed:Connect(function()
	
	script.Parent.Size = UDim2.fromOffset(Throttle.AbsoluteSize.x, Throttle.AbsoluteSize.Y)
	
end)

[Sleazel (Malcolm)]

EDIT: I was too late, but I will post it just in case. GG on solving it.

Frame3 has to be in offset, as otherwise it will adjust to the size of frame2.

The solution would be to connect to the frame1 AbsoluteSize property changed signal.

local function OnSizeChanged()
   frame3.Size = Udim2.new(0,frame1.AbsoluteSize.X,0,frame1.AbsoluteSize.Y)
end

frame1:GetPropertyChangedSignal('AbsoluteSize'):Connect(OnSizeChanged)

--run it once on start
OnSizeChanged()