How to create a scrollable inputfield

Questions & Answers
1

I am trying to add a scroll bar to an input field with no success so far.

The main issue is that the text component size doesn’t change with the amount of text, which would allow for the scroll bar to detect what to scroll properly. Also when i change the size of the text area, the input field starts to get buggy.

Another option is to invoke a scroll directly when detecting a scroll wheel event. Any ideas how this might be accomplished?

2

Hello horiadev,

  1. Create ScrollBar
  2. Create InputField
  3. Add ScrollRect component to InputField
  4. Add ScrollBar to ScrollRect component (field "Horizontal/Vertical scrollbar)
  5. Resize Text (Child of InputField) to your needs
  6. Add Text to ScrollRect component (field “Content”)
  7. Add Mask Component to Inputfield
3

Ok, here is my solution for now :

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

/// <summary>
/// Display text with a scrollbar if you are not in edition mode
/// Display an editable text (without scrollbar until Unity fix it) if IsEdition is true 
/// </summary>
public class UIScrollableInputField : MonoBehaviour {

    private bool _isEdition;
    public bool IsEdition
    {
        get
        {
            return _isEdition;
        }
        set
        {
            _isEdition = value;

            if (_isEdition)
            {
                _inputFieldEditeMode.text = TextToDisplay;
                _textViewMode.text = "";
                _inputFieldEditeMode.gameObject.SetActive(true);
                _scrollView.gameObject.SetActive(true);
                _scrollbar.gameObject.SetActive(false);
            }
            else
            {
                _inputFieldEditeMode.text = "";
                _textViewMode.text = TextToDisplay;
                _inputFieldEditeMode.gameObject.SetActive(false);
                _scrollView.gameObject.SetActive(!string.IsNullOrEmpty(TextToDisplay));
            }
        }
    }

    private string _textToDisplay = "";
    public string TextToDisplay
    {
        get
        {
            return _textToDisplay;
        }
        set
        {
            if (TextToDisplay != value)
            {
                if (_textToDisplay == null)
                {
                    _textToDisplay = "";
                }
                else
                {
                    _textToDisplay = value;
                }
                

                Debug.Log("display: " + TextToDisplay);

                if (IsEdition)
                {
                    _inputFieldEditeMode.text = TextToDisplay;
                }
                else
                {
                    _textViewMode.text = TextToDisplay;
                    // Hide the dialogue is nothing to display
                    _scrollView.gameObject.SetActive(!string.IsNullOrEmpty(TextToDisplay));
                }
            }
        }
    }

    [SerializeField]
    private Text _textViewMode;
    [SerializeField]
    private InputField _inputFieldEditeMode;
    [SerializeField]
    private ScrollRect _scrollView;
    [SerializeField]
    private Scrollbar _scrollbar;
}
4

Posted a hacky solution to InputField with scrollbar here: