Unity: How to make a scrollrect fit its content with a maximum height? - unity3d

Question

I have a Container (1) that I want to grow with its content.
Inside this Container (1), I have a Scrollrect (2) that I also want to grow with its content but with max height.
The goal is that if there is only one line of text in (2), (1) will be much smaller. When a lot of text is added, (2) will grow until its max height is reached and the scrollbar will take over.
I have been at it for hours and I cannot seem to find a way to make it work.

Answer 1

You can do this via Text.preferredHeight e.g. like this component on your scroll content
public class ContentScaler : MonoBehaviour
{
[SerializeField] private RectTransform _scrollRectTransform;
[SerializeField] private RectTransform _contentRectTransform;
[SerializeField] private Text _text;
[SerializeField] private float minScrollHeight;
[SerializeField] private float maxScrollHeight;
private void Awake()
{
if (!_contentRectTransform) _contentRectTransform = GetComponent<RectTransform>();
}
private void Update()
{
// Get the preferred Height the text component would require in order to
// display all available text
var desiredHeight = _text.preferredHeight;
// actually make your text have that height
var textSizeDelta = _text.rectTransform.sizeDelta;
textSizeDelta.y = desiredHeight;
_text.rectTransform.sizeDelta = textSizeDelta;
// Then make the content have the same height
var contentSizeDelta = _contentRectTransform.sizeDelta;
contentSizeDelta.y = desiredHeight;
_contentRectTransform.sizeDelta = contentSizeDelta;
var scrollSizeDelta = _scrollRectTransform.sizeDelta;
scrollSizeDelta.y = Mathf.Clamp(desiredHeight, minScrollHeight, maxScrollHeight);
_scrollRectTransform.sizeDelta = scrollSizeDelta;
}
}

Answer 2

Building upon Ryan Pergent's answer, I made the code do what he wanted (Mostly) and added the ability to set the preferred height and width
using UnityEngine;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
#endif
public class AdaptablePreferred : LayoutElement, ILayoutElement {
#if UNITY_EDITOR
[CustomEditor(typeof(AdaptablePreferred))]
public class Drawer : Editor {
public override void OnInspectorGUI() {
EditorGUI.BeginDisabledGroup(true);
EditorGUILayout.PropertyField(serializedObject.FindProperty("m_Script"));
EditorGUI.EndDisabledGroup();
EditorGUI.BeginChangeCheck();
EditorGUILayout.BeginHorizontal();
EditorGUILayout.PrefixLabel("Preferred Height");
var prop = serializedObject.FindProperty("_usePreferredHeight");
EditorGUILayout.PropertyField(prop, new GUIContent(""), GUILayout.Width(EditorGUIUtility.singleLineHeight));
if(prop.boolValue) {
var tmp = EditorGUIUtility.labelWidth;
EditorGUIUtility.labelWidth = 35;
EditorGUILayout.PropertyField(serializedObject.FindProperty("_preferredHeightMax"), new GUIContent("Max"));
EditorGUIUtility.labelWidth = tmp;
}
EditorGUILayout.EndHorizontal();
EditorGUILayout.BeginHorizontal();
EditorGUILayout.PrefixLabel("Preferred Width");
prop = serializedObject.FindProperty("_usePreferredWidth");
EditorGUILayout.PropertyField(prop, new GUIContent(""), GUILayout.Width(EditorGUIUtility.singleLineHeight + 2));
if(prop.boolValue) {
var tmp = EditorGUIUtility.labelWidth;
EditorGUIUtility.labelWidth = 35;
EditorGUILayout.PropertyField(serializedObject.FindProperty("_preferredWidthMax"), new GUIContent("Max"));
EditorGUIUtility.labelWidth = tmp;
}
EditorGUILayout.EndHorizontal();
EditorGUILayout.PropertyField(serializedObject.FindProperty("_contentToGrowWith"));
if(EditorGUI.EndChangeCheck()) {
serializedObject.ApplyModifiedProperties();
}
}
}
#endif
[SerializeField] private RectTransform _contentToGrowWith;
[SerializeField] private bool _usePreferredHeight;
[SerializeField] private float _preferredHeightMax;
[SerializeField] private bool _usePreferredWidth;
[SerializeField] private float _preferredWidthMax;
private float _preferredHeight;
private float _preferredWidth;
public override float preferredHeight => _preferredHeight;
public override float preferredWidth => _preferredWidth;
public override void CalculateLayoutInputVertical() {
if(_contentToGrowWith == null) {
return;
}
if(_usePreferredHeight) {
var height = LayoutUtility.GetPreferredHeight(_contentToGrowWith);
_preferredHeight = _preferredHeightMax > height ? height : _preferredHeightMax;
} else {
_preferredHeight = -1;
}
}
public override void CalculateLayoutInputHorizontal() {
if(_contentToGrowWith == null) {
return;
}
if(_usePreferredWidth) {
var width = LayoutUtility.GetPreferredWidth(_contentToGrowWith);
_preferredWidth = _preferredWidthMax > width ? width : _preferredWidthMax;
} else {
_preferredWidth = -1;
}
}
}

Answer 3

I achieved it by adding the following script to the Viewport:
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
[RequireComponent(typeof(LayoutElement))]
public class AdaptablePreferredHeight : UIBehaviour, ILayoutElement
{
public float MaxHeight = 100;
public RectTransform ContentToGrowWith;
public int LayoutPriority = 10;
LayoutElement m_LayoutElement;
float m_Preferredheight;
public float minWidth => m_LayoutElement.minWidth;
public float preferredWidth => m_LayoutElement.preferredWidth;
public float flexibleWidth => m_LayoutElement.flexibleWidth;
public float minHeight => m_LayoutElement.minHeight;
public float preferredHeight => m_Preferredheight;
public float flexibleHeight => m_LayoutElement.flexibleHeight;
public int layoutPriority => LayoutPriority;
public void CalculateLayoutInputHorizontal()
{
if (m_LayoutElement == null)
{
m_LayoutElement = GetComponent<LayoutElement>();
}
}
public void CalculateLayoutInputVertical()
{
if(m_LayoutElement == null)
{
m_LayoutElement = GetComponent<LayoutElement>();
}
float contentHeight = ContentToGrowWith.sizeDelta.y;
if (contentHeight < MaxHeight)
{
m_Preferredheight = contentHeight;
}
else
{
m_Preferredheight = MaxHeight;
}
}
}
I would have just inherited LayoutElement instead of making it a RequireComponent, but then the inspector won't show my new MaxHeight and ContentToGrowWith variables.
The ContentToGrowWith variable points to the content object inside the ViewPort.
The final setup is:
Scroll View with an horizontal layout group Control Child Size: "Height". (no child force expand, so it can shrink with its children)
Viewport with LayoutElement and my script AdaptablePreferredHeight.
Content with ContentSizeFitterset on Vertical Fit: "Preferred Size"