How would I make a scrollable textbox that automatically increases in canvas size when the text gets cut off?

Help and Feedback Scripting Support
,
#1

I want to make it so when my text reaches the limit of the textbox, it becomes scrollable and creates more space for the cutoff text. When You type and it reaches the end of the textbox, it gets cutoff as shown here:

image
image1263×531 40.3 KB

I’ve tried doing it myself and looking on the devforum and I’m still not quite sure of the most efficient way of going about this. My only way I can think of is either checking when textfits = false or by using textbounds.

Thanks for reading!

7 Likes
#2

You’re absolutely on the right track with TextFits and TextBounds. I’ve programmed solutions to similar problems using both in the past. I’d say the right choice for you depends on the context behind how the TextBox will be used. You can use a repeat loop beginning at 1*[Your Line Height] to define the YOffset of the TextBox, then increasing the 1 to 2, 3 an so on until TextFits == true. Alternatively, whenever the text is changed, you can set the TextWrapped property of the TextBox to false, forcing all the text to appear on a single line. This will update the TextBounds property which you can then simply divide the x component by the width (AbsoluteSize.X) of your TextBox to get how many lines will be required to fit all the text. In both cases I’d recommend adding one to a few extra lines just to make sure that the text is not clipped at the bottom. Also, you may have to run a few tests, I have not checked on this in a while but I remember running into an issue where the TextBounds property is not immediately accurate after setting the Text of a TextBox (which would throw off your calculations). Hope this helps!

1 Like
#3

I understand and have a basic script that can do this now. My only problem is I can’t scroll on the scrollframe because there’s a textbox on top. How should I fix this?

1 Like
#4

Can you send a screen shot of the Frames ancestry etc

1 Like
#5

image
Textarea is the scrollingframe.
Text is the textbox.
Content is just the frame holding all of it.

2 Likes
#6

Set the ZIndex for the scrolling frame to 2 and the text box to 1

1 Like
#7

Thanks, that works perfectly. I’ll mark the topic as solved once I finalize the scripts.

2 Likes
#8

Wait my bad. When there is text occupying the area you are trying to scroll in it doesn’t work.

2 Likes
#9

Can you send me a screenshot of what your frame looks loke

1 Like
#10

Wait it was because I was focused on the textbox. When I unfocus I can scroll fine.

2 Likes
#11

Can i see the script???

1 Like
#12

Still working on it. I will send it when it’s working or if I run into problems.

1 Like
#13

My Code so far:

textArea:GetPropertyChangedSignal("TextFits"):Connect(function()
    while textArea.TextFits == false do
		scrollFrame.CanvasSize = UDim2.new(0, 0, 1, scrollFrame.CanvasSize.Y.Offset + 16)
		scrollFrame.CanvasPosition = Vector2.new(0, scrollFrame.CanvasPosition.Y + 16)
	end
end)

This so far increases the canvas size and makes the canvas position go to the bottom. If the user deleted their text how would I make it go back to a smaller size?

1 Like
#14

Try adding an else statement, then add a tiny code that will put it back to its original size and positon… :+1:

1 Like
#15

I think I’m gonna go to bed I’ll try it in the morning. Thanks!

2 Likes
#16

No problem, good night and have good dreams

2 Likes
#17

This might be what you’re looking for:

2 Likes
#18

This is really good, it even helps for me

1 Like
#19

I looked into AutomaticSize when I originally started this project. My application is slightly different than what AutomaticSize is designed to do.

I just finished my script and it seems to be doing everything how I want it to. Thanks for the help guys.

local textArea = script.Parent.Text
local scrollFrame = script.Parent

textArea:GetPropertyChangedSignal("TextFits"):Connect(function()
    while textArea.TextFits == false do
		scrollFrame.CanvasSize = UDim2.new(0, 0, 0, scrollFrame.CanvasSize.Y.Offset + 16)
		scrollFrame.CanvasPosition = Vector2.new(0, scrollFrame.CanvasSize.Y.Offset - scrollFrame.AbsoluteWindowSize.Y)
	end
end)

textArea:GetPropertyChangedSignal("TextBounds"):Connect(function()
	if scrollFrame.CanvasSize.Y.Offset > textArea.TextBounds.Y + 16 then
		scrollFrame.CanvasSize = UDim2.new(0, 0, 0, textArea.TextBounds.Y)
		scrollFrame.CanvasPosition = Vector2.new(0, scrollFrame.CanvasSize.Y.Offset - scrollFrame.AbsoluteWindowSize.Y)
	end
end)
13 Likes
#20

Thanks, its really useful. I was finding a solution from 2 days and finally found your post and it fixed my problem.

1 Like