Dynamic TMP_Text width

[Michele-Santoni]

I tried to test the FlexLayout component when the length of the text of the TMP_Text can change.
The hierarchy is this:

• Root
• • Text_1_Parent
• • • Text_1
• • Text_2_Parent
• • • Text_2

Every gameobject has a FlexLayout component attached and they are set like this:

[ Root ]

[ both Text_*_Parent gameobjects ]

[ both Text gameobjects ]

As shown in the "Scroll View" smaple scene, I attached the ContextSizeFitter component (with the "Horizontal Fit" option set to "Preferred Size") to both the TMP_Text gameobjects and the result is this:

p.s. the red box is the Root gameobject and the white boxes are the Text_*_Parent gameobjects.

When I'm trying to get this result instead:

Am I missing something? Do I need to change the settings of my FlexLayout in a certain way?

[lgarczyn]

From what I understand, the text components are layoutelements, and don't need a flex layout. The flex layouts you are adding are overriding the ILayoutElement of the text, and preventing size adjustment

[gilzoide]

Hey @Michele-Santoni, thanks for the question.

The Root is your actual root FlexLayout, correct? So right now, the root FlexLayout size is fixed, its size is used as the "available width/height" that Yoga library expects. So the root object won't resize because of its chindren's contents, even with "width = auto". Maybe we should make it clearer in the Inspector of the root that width/height doesn't affect the root layout itself 🤔

What you'll need to do is have the root layout occupy the whole space that should be available horizontally, even if the contents won't need all of it. The children text parents and the texts configs look fine, they should resize themselves based on the text contents, since their "width = auto".

By the way @lgarczyn, right now FlexLayout does not affect any children without FlexLayouts, so in this case the texts also need them. There are plans to have an alternative to FlexLayout that is actually a LayoutGroup and considers/affects direct children without FlexLayout components, but it hasn't been done yet (#27).

[lgarczyn]

Hey @Michele-Santoni, thanks for the question.

The Root is your actual root FlexLayout, correct? So right now, the root FlexLayout size is fixed, its size is used as the "available width/height" that Yoga library expects. So the root object won't resize because of its chindren's contents, even with "width = auto". Maybe we should make it clearer in the Inspector of the root that width/height doesn't affect the root layout itself 🤔

What you'll need to do is have the root layout occupy the whole space that should be available horizontally, even if the contents won't need all of it. The children text parents and the texts configs look fine, they should resize themselves based on the text contents, since their "width = auto".

By the way @lgarczyn, right now FlexLayout does not affect any children without FlexLayouts, so in this case the texts also need them. There are plans to have an alternative to FlexLayout that is actually a LayoutGroup and considers/affects direct children without FlexLayout components, but it hasn't been done yet (#27).

Damn, i saw the closed issue and I thought that was handled

[Michele-Santoni]

Hey @Michele-Santoni, thanks for the question.

The Root is your actual root FlexLayout, correct? So right now, the root FlexLayout size is fixed, its size is used as the "available width/height" that Yoga library expects. So the root object won't resize because of its chindren's contents, even with "width = auto". Maybe we should make it clearer in the Inspector of the root that width/height doesn't affect the root layout itself 🤔

What you'll need to do is have the root layout occupy the whole space that should be available horizontally, even if the contents won't need all of it. The children text parents and the texts configs look fine, they should resize themselves based on the text contents, since their "width = auto".

By the way @lgarczyn, right now FlexLayout does not affect any children without FlexLayouts, so in this case the texts also need them. There are plans to have an alternative to FlexLayout that is actually a LayoutGroup and considers/affects direct children without FlexLayout components, but it hasn't been done yet (#27).

Hello! Sorry for the late response.

Yeah, I've set the Root to occupy all the horizontal space (as shown in the next gif, the Root is the red part).
But the problem is still that the TMP_Text doesn't stop expanding horizontally when the text overflows the Root width.

I thought the problem here was that the CotentSizeFitter was overwriting the FlexLayout so I disabled it.
Then I saw that when a field of the FlexLayout is changed manually, the layout of the TMP_Text is refreshed and the text doesn't overflow the Root even if it's much wider.
I leave another gif to show what I'm trying to explain (english is not my first language, sorry).

Now the question is: is there a way to manually refresh the FlexLayout from another monobehaviour? I saw that there are two public methods RefreshRootLayout() and RefreshRootLayoutImmediate(), but neither of them did anything.

I tested it with a simple component that implements ILayoutSelfController, which it calls SetLayoutHorizontal() when the text of the TMP_Text is changed.

    [ExecuteAlways]
    public class TMP_TextRectTracker : UIBehaviour, ILayoutSelfController
    {
        [SerializeField] private FlexLayout flexLayout;
        
        private RectTransform rectTransform;

        public RectTransform RectTransform
        {
            get
            {
                if (rectTransform == null)
                    rectTransform = GetComponent<RectTransform>();
                return rectTransform;
            }
        }
#if UNITY_EDITOR
        protected override void OnValidate()
        {
            SetDirty();
        }
#endif

        protected override void OnRectTransformDimensionsChange()
        {
            SetDirty();
        }

        protected override void OnEnable()
        {
            base.OnEnable();
            SetDirty();
        }

        protected override void OnDisable()
        {
            LayoutRebuilder.MarkLayoutForRebuild(rectTransform);
            base.OnDisable();
        }

        public void SetLayoutHorizontal()
        {
            Debug.Log("Set layout horizontal");
            if (flexLayout != null)
                flexLayout.RefreshRootLayout();
                // flexLayout.RefreshRootLayoutImmediate();
        }

        public void SetLayoutVertical()
        {
            Debug.Log("Set layout vertical");
        }

        protected void SetDirty()
        {
            if (!IsActive())
                return;

            LayoutRebuilder.MarkLayoutForRebuild(rectTransform);
        }
    }

[gilzoide]

But the problem is still that the TMP_Text doesn't stop expanding horizontally when the text overflows the Root width.

Hmm, got it. Yeah, I don't have an answer right now to how it should be done in this case, would have to test.

Now the question is: is there a way to manually refresh the FlexLayout from another monobehaviour? I saw that there are two public methods RefreshRootLayout() and RefreshRootLayoutImmediate(), but neither of them did anything.

RefreshRootLayout would be the way to go. If nothing changed in the layouts, though, there would be nothing to be done indeed, Yoga will avoid recalculating layouts since nothing changed. @Michele-Santoni What are you changing/trying to change before triggering a layout refresh that should be reflected in the layout?

[Michele-Santoni]

@gilzoide only the text of the TMP_Text component