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

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

From what I’m looking at here: Font | Documentation - Roblox Creator Hub

[“Gotham SSm”] doesn’t exist. There’s only 4 that are listed:

  1. Enum.Font.Gotham
  2. Enum.Font.GothamMedium
  3. Enum.Font.GothamBold
  4. Enum.Font.GothamBlack

Think one of those will do the trick, which means there wouldn’t be a smart way to convert FontFace to a Font enum sadly…

Is there any way to do this with scale instead of offset?

What we can do is use the OffsetToScale method I posted previously, feed the pixel sizes that return from that :GetTextSize(). :slight_smile:

local function OffsetToScale(Offset)
	local ViewPortSize = workspace.Camera.ViewportSize
	return ({Offset[1] / ViewPortSize.X, Offset[2] / ViewPortSize.Y})
end

So in this example, the full script in your use-case would be:

local WS = game:GetService("Workspace")
local TextS = game:GetService("TextService")

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

-- Use our OffsetToScale method here.
local ViewPortSize = WS.Camera.ViewportSize
local textSizeInScale = {textSizeInPixels.X / ViewPortSize.X, textSizeInPixels.Y / ViewPortSize.Y}

-- Now we can resize our CanvasSize of our ScrollingFrame here.
ScrollingFrame.CanvasSize = UDim2.new(textSizeInScale[1], 0, textSizeInScale[2], 0)

For some reason when I use the example you gave, the scale of the canvas gets set to insanely large numbers like 430.