How do I make a ScrollingFrame's canvas be the size of its contents?

I have a ScrollingFrame with a TextLabel in it. The TextLabel’s text is set by a script, and can vary. I want the ScrollingFrame’s canvas to match the length of the text of the TextLabel, so that there isn’t a large empty canvas when the text is small. How would I do this?

4 Likes

If you know the size of the TextLabel at the time, all you would need to do is change the CanvasSize property to the size of the TextLabel. You could possibly use the TextLabel’s AbsoluteSize like so (keep in mind, this will be pixel size, not scale):

ScrollingFrame.CanvasSize = UDim2.new(0, TextLabel.AbsoluteSize.X, 0, TextLabel.AbsoluteSize.Y)

Where ScrollingFrame and TextLabel are the objects you’re talking about above. :slight_smile:

2 Likes

Is there any way to do that with scale?

2 Likes

You would have to calculate the scale of the TextLabel relative to the ScrollingFrame, as a test what you can do (to see if it’s what you’re after) is use the line of code I put (for context, you would have to put it in some sort of update, maybe a :GetPropertyChangedSignal(“Size”) on the TextLabel and use :Connect() on that to connect a function) like so:

TextLabel:GetPropertyChangedSignal("Size"):Connect(function()
    ScrollingFrame.CanvasSize = UDim2.new(TextLabel.Size.Scale.X, 0, TextLabel.Size.Scale.Y, 0)
end)
2 Likes

Thanks. Although sort of irrelevant, is there any way to make the X size of the TextLabel grow/shrink depending on the length of the text, so that the text maintains the same size while also not having to use a very long TextLabel?

You don’t require any additional scripts, everything is in the properties.

  • Change CanvasSize to {0, 0},{0, 0}
  • And put AutomaticCanvasSize to any direction you want (X,Y,XY).

This should do the job.

3 Likes

When I use the AutomaticCanvasSize option on the X axis, the scrolling bar shrinks the further I zoom out from the ScrollingFrame, do you know how to stop this?
image

1 Like

That’s the behaviour of using Scale as a unit of sizing GUI elements, setting a static pixel size should do the trick for that.

1 Like

And do you have any idea how I’d do this, @xmthl ?

1 Like

In the properties of the TextLabel, you can play around with its ‘Size’ property a bit to get the size you want. I do recall a plugin that converted scale size to pixel size for you. I’ll see if I can find the formula for it.

Found the methods, you can use this in the updater you have to size the TextLabel and the ScrollingFrame based on the Viewport dimensions: How can you convert offset size to scale size? - #7 by kylerzong

Where Offset[1]/Scale[1] and Offset[2]/Scale[2] is the X and Y of either Scale or Offset, depending on which code you use (ScaleToOffset or OffsetToScale).

I don’t think you really understand what I mean. Right now, I have to keep the TextLabel long so that all text displayed in it retains the same size. This, however, means that the ScrollingFrame will have lots of empty space usually because most of the TextLabel is empty. I want to know if there’s a way to ensure that the TextLabel’s X size, in scale, is always the same as the length of the text inside it.

text scaled? i think idkkkkkkk

In that case then, since the TextLabel is the variable here (as in, it can change size/length), we need to resize the ScrollingFrame accordingly (which I’m hoping is the yellow box in this case, if not you’re gonna want to resize this too if you want the text showing entirely).

What you could do is tick the ‘TextScaled’ property, set that to true so it dynamically resizes to the TextLabel’s size (which means you won’t need that absurd length of the TextLabel).

Then you could resize it with Scale to fit in the ScrollingFrame and set the CanvasSize equal to the TextLabel’s size, but it’s ACTUAL size set to a static pixel size (use the ScaleToOffset method in the link above I showed you to calculate and resize it accordingly).

Hope I understood it that time haha.

Text scaled is already enabled. Plus, I want the actual TextLabel’s size to be reduced/increased depending on the length of the text, not vice versa.

Just found a really nifty service that looks perfect for your use-case: TextService | Documentation - Roblox Creator Hub

From the looks of it, depending on the text you input, it’s font size and the size of the TextLabel, it’ll return a pixel size of the length of the text. Then you would just need to resize your ScrollingFrame’s CanvasSize to the output of :GetTextSize().

Example usage:

local TextS = game:GetService("TextService")

local textSizeInPixels = TextS:GetTextSize(TextLabel.Text, TextLabel.TextSize, TextLabel.FontFace, TextLabel.AbsoluteSize) -- Returns a Vector2, not a UDim2, important to note.

-- Now we can resize our CanvasSize of our ScrollingFrame here.
ScrollingFrame.CanvasSize = UDim2.new(0, textSizeInPixels.X, 0, textSizeInPixels.Y)

Something like that (will need adjusting) should work.

1 Like

image
I appear to be getting this error when running that script; any idea why?

I’ll have a check what the parameter takes, it’s to do with the TextLabel.FontFace I passed in. One moment. :slight_smile:

1 Like

I believe it uses a font Enum.

1 Like

Yeah it does, that means you’ll have to replace that with whichever font your TextLabel is using and convert it to a Enum.Font enum. Might be able to smartly cast it to the right one based on FontFace (tostring FontFace maybe?). For now put the one you’re using statically though.

1 Like

My font has a space in it, how would I write this as an Enum? This is returning me an error:
image

1 Like