Add a UI Fill Object

Usually to keep things fitting in their container you can keep track of your scale numbers. (two objects with X size 0.5 will fit 0.5+0.5=1 and so on. There might be some situations though where you don’t directly now the scale of an object on one axis because it might be constrained. (UIConstraint or Relative settings for example) If you had an object along the constrained axis, you could definitely write some code to calculate it, but that gets in the way of visual design building and this seems like a pretty fundamental object in functionality.
Here is an example:


I was working on this and my image in the middle needs to be constrained to keep its square shape then I want the length of the next two elements to “fill” horizontally to the end of the container its in. I’m using UILayouts as well to keep them neatly padded and organized.

5 Likes

This is definitely something that we want to address in the future, but I can’t say when it’ll happen.

3 Likes

Thanks for the reply! Glad to know its brought to your guys attention. :smile:
For those who may be struggling with this here is my quick solution:
I just put this script in a string value and put it as a child of whatever I wanted to scale to fill:

local Parent = script.Parent.Parent

function CalculateHorizontalFill(Object,Parent)
	local ParPos = Parent.AbsolutePosition.X
	local ParSize = Parent.AbsoluteSize.X
	local ObjPos = Object.AbsolutePosition.X
	local ObjSize = Object.AbsoluteSize.X
	local NewSize = ParPos+ParSize-ObjPos
	return UDim2.new(0,NewSize,Object.Size.Y.Scale,Object.Size.Y.Offset)
end
script.Parent.Parent.Size = CalculateHorizontalFill(script.Parent.Parent,Parent.Parent)

local RunService = game:GetService('RunService')
 
RunService.Heartbeat:Connect(function(step)
	script.Parent.Parent.Size = CalculateHorizontalFill(Parent,Parent.Parent)
end)

You can replace all the X values with Y for a vertical fill. I know its messy it was scrapped together. Feel free to clean it up and expand.