How to get a multi-line Input Field text box to expand and become scroll able?
As the title mentions, I'm attempting to get a multi-line Input Field to become scroll able but the Text element refuses to expand even with a Content Size Fitter. Here is what I am currently working with.
The hierarchy: http://i.imgur.com/Rn3iVcC.png
The ScrollArea: http://i.imgur.com/6gPReIT.png
The Text: http://i.imgur.com/0rhoW13.png
When ever I enter enough text the text will simply disappear from the top rather than expand the Text element. Has anyone managed to get this to work?
Answer by illa3d · Feb 09, 2017 at 11:10 AM
I've had a simmilar issue and compiled a workaround until Unity fixes the InputField functionality. All the combinations of layous/content fitters didn't yield proper display of the last line. The only downside is that you can't fix the height of the input field without a ScrollRect component, also in the example.
HACKY SOLUTION:
InputFieldMod.cs - http://pastebin.com/AHggHUMX
Example - http://illa3d.com/unity/inputfield_mod_v1.0.unitypackage
Answer by FStar · Sep 23, 2015 at 05:23 PM
You can set Text field to vertical overflow. Then put the ContentSizeFitter on the InputField, that you put below your scroll area in the hierarchy, not on it. It makes scrolling work but you'll get into other problems. Like selection of text not working properly and the InputFiled is pretty limited in the amount of text it can handle, it runs into problems with the rendering after some thousands of characters and starts throwing exceptions...
Answer by bkachmar · Aug 01, 2017 at 10:51 AM
This is my setup to make a scalable input field:
Regular UI Text field with ContentSizeFitter vertical set to Preferred size and unchecked Raycast target.
As a child I add Input Field as Multi Line with with RectTransform "stretch" alignment, so that it takes the full size of it's parent.
The Text child of Input Field has the color set to invisible, so that it is not displayed at all.
And on Input Field Value Changed I set it's value to my parent Text.
With this setup when I type something inside the input field it is copied to it's parent "visible" text that is scalable.
The same way you can have a scroll view with a scroll bar and an Input Field taking up all the space (except of a few pixels on the right where the scroll bar is). And the text from InputField will be assigned to Scroll view.