How to auto resize InputField according to text inside?

I'm using new UI, able to resize InputField via coding already. Now I'm searching for method to make InputField clamp or resize like Paint/Photoshop text tool working.

I set up InputField line type to 'Multi Line Newline' and text has been set to Wrap Horizontal Overflow. Able to see other overflow line by pressing Up/Down key.

After I realize how text is separate. I try searching API for a code or variable that return how many line of text to use it calculate new field size immediately but I can't find it. Try using Layout Element but it's not working with InputField like it done to Text UI.

Also it's an error;

When I set Text inside InputField to Vertical Overflow then type and press Enter to begin new line. Text in new line also lost from screen as well.

 

Simple answer. The ContentSizeFitter component.
Add that to your Inputfield.

It resizes the parent rect to match those of it's children

 

It's not working, how you use it?

I add it to InputField and try to set Vertical fit, the field keeps flatten itself to 10.

 

I'll do some tests locally. Could be you also need to use a LayoutElement on the Text/PlaceHolder children as well (shouldn't do as Text implements the Layout options internally)

 

Looks like my problem somewhat cause from this bug...
http://forum.unity3d.com/threads/inputfield-argumentoutofrangeexception.295840/

If you could make an InputField I do want, please tell me your solution. I screw up with layout element and that does like nothing to InputField. It's Like InputField itself override any component, rendering it no use.

Jump to try NGUI's InputField as well, but the problem is even worse.

 

Right, had a really good hack at this and with the default InputField, it just isn't possible. The reason is simple.
Because of the logic in the script to position the Caret and overflow text handling. The Layout is not updated to take account of the text content. The control is actively working against you in this case.

To do this you would need to build a custom version of the InputField script to remove the overflow functionality.

 

So, what should I do if I do want a UI element with selectable text, that also expands to the size of its content? Is there some way to make the InputField consider the Layout?

 

Yes there is; I just recently figured this out with some trial and error, and poking around
I used a vertical layout on my inputfield and had all of the boxes checked. (this may or may not produce a tiny error in having to click once on the inputfield ), but maybe not b/c in my case I was using a separate input/output field(s).

 

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.

 

You're a genius man, thank you so much !

 

Thank you for this. It was tremendously helpful.

However, I did modify two things:
1. I make the parent Text object's text invisible (note: the Text component must be enabled to get the ContentSizeFitter to work.
2. On the InputField's OnValueChanged I call a method that resizes the child Text object's height by the following code.

Code (CSharp):

1. LayoutRebuilder.ForceRebuildLayoutImmediate(value);
2.  
3.         if (rectTransformComponent.rect.height < value.rect.height)
4.             rectTransformComponent.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, value.rect.height);

This allows for the selection of the child text and it allows me to have the input field function with the ScrollRect.

Thank you again for the insight. And for asking this question OP!

 

You're a really genius man, thank you so much, too!
But i made invisible not child but parent text, so my text can be selected.

 

wow this is such a weird convoluted setup but it works!

 

The issue i see is that the multiline doesnt expand vertical. It just expands right as a single line.

 

Dude you saved my life, thanks a lot!

 

Can i add a text selection caret to it?