Multi Line Input Field with Scrollbar

In the old unity before the new UI the textbox have a scrollbar for users to scroll up and down on it.

There doesn't seem to be any for the new UI and the user have to move up and down with the keyboard or using the mouse highlight select.

Any way to add it?

These answers does not have the desired results

http://answers.unity3d.com/questions/962275/add-scrollbar-to-multiline-input-field.html

http://answers.unity3d.com/questions/798599/how-to-create-a-scrollable-inputfield.html

http://answers.unity3d.com/questions/1107640/how-to-create-a-scrollable-inputfield-using-new-ui.html

http://answers.unity3d.com/questions/932607/putting-a-multiline-inputfield-in-a-scroll-rect.html

 

What about this?

 

It's not good.

It have the same issue with
http://answers.unity3d.com/questions/932607/putting-a-multiline-inputfield-in-a-scroll-rect.html


I tried putting it into a scroll rect but the Selected highlight are still visible outside of the rect.

Edit: is there any functions for these?
1. Get the Current Line showing
2. Get the Max Line number
3. Set the Caret to Line

I feel like if I can get those I can create the scrollbar.

 

No, you can't. Can't find the post, but I recalled a Unity employee said the InputField was not designed to let the developers get and set the caret position, and show the current line selected. It's very likely there will be no support for these behaviors.

Please correct me if I'm wrong, because if I'm wrong, then that means they will have some support in the future, and I want them to do so.

 

This pretty much validates that Unity Technologies will not be implementing a native solution for scalable, scrollable text field UI objects.

 

I bought TextMesh Pro because of this feature and it works great, but how do I get it to work with a scroll bar too?

 

No just a vertical scroll bar, as seen in the GIF.

I searched the docs, but maybe I missed something?

 

Well I called it. Unity Technologies isn't going to work on it, and instead, your creation is well enough to be integrated natively into Unity. Congratulations!

Blog announcement

 

if you got problems with a caret position, just set
Text - RectTransform - Pivot x = 0, y = 1.
Placeholder object - add Layout Element - Ignore Layout.

 

Great asset and feature, we have some problems with the input field tough :
1) Scroll is visible even when text is really short
2) even with no scroll, scrolling with the mouse will move the text (and that even if there's just one line and it shouldnt scroll)

Thanks for your help!

 

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.

 

Thanks for the idea, I was looking for a way to do it without adding TextMesh Pro for a single InputField.
Unfortunately, while the expanding works well, there are still two problems with that:

1. You shouldn't use a LayoutGroup on the text's parent (the Content Size Fitter then also messes with the size) but if you're making some kind of form, there's really no way around that (afaik) - unless you only support a single resolution and can justify hardcoding the sizes of everything.

And 2., which is much more important, the parent text field is rendered behind the InputField as parents usually are. I'm using Unity 2017.3.1f1 and not sure if that changed anything but it looks like it doesn't just work the way @bkachmar suggested. In the end you'll have to do one of these things:

• Set the background color of the InputField to invisible
• If you want a white background: -"- AND add some panel (but it won't look the same as a default InputField)
  
• Use an extra shader on the text and the InputField and change the rendering order

 

Hi Stephan. I can't seem to make this work at all? Is this something which has been implemented as of Unity 2018.3/TextMeshPro v1.30?

Can you point me in the right direction for resources/a guide?

 

How could I go about having the scrollbar auto hide like in the Scroll Rect component?

 

Did you ever figure out a way to do this?

 

Anyone know how to auto hide the scrollbar if it's not needed? Scrollbar visibility is set to auto hide yet it is always shown.

 

I just wasted two hours trying to program a class that does EXACTLY THIS with a normal textbox but it just wasn't quite right. Then i found this. fml
At least i have a nice looking scrolling itputfield now

 

1) Add a CanvasGroup to the scrollbar with alpha 0
2) Add a "OnValueChanged" on the scrollbar and call a method that will check the size of the scrollbar. If it's less than 1, it means the content has grown, so you should make the scrollbar visible.

Code (CSharp):

1. public void OnValueChanged()
2. {
3.     scrollbarCanvasGroup.alpha = scrollbar.size < 1f ? 1f : 0f;
4. }

 

@Fayalita, thank you so much for sharing your solution!