Wrapped text is crushed after visibility toggle (display: flex -> none -> flex)

Unity Engine
1

I am using Unity 2020.1.0b4 with UI Builder 0.10.2 and UIElements Runtime 0.0.4.

That’s the initial state in the game window:

5685841--593281--good.png
5685841--593281--good.png505×673 79.8 KB

After i click the middle button on the bottom, and then the right one to go back, it looks like this:

5685841--593284--bad.png
5685841--593284--bad.png501×667 69.1 KB

When i select the label…

5685841--593302--crushed text.png
5685841--593302--crushed text.png507×669 69.8 KB

…and in the debugger change the value for “white-space” from “Normal” to “No Wrap” and back to “Normal”…

5685841--593305--debugger.png
5685841--593305--debugger.png1138×79 6.12 KB

…it looks good again.

5685841--593308--better.png

Here is the code i use to manage the ui:

using System.Collections.Generic;
using UnityEngine;
using Unity.UIElements.Runtime;
using UnityEngine.UIElements;

namespace Jupiter.UI
{
  [RequireComponent(typeof(PanelRenderer))]
  [RequireComponent(typeof(UIElementsEventSystem))]
  public class Play : MonoBehaviour
  {
    public VisualTreeAsset _presetsTemplate;
    public VisualTreeAsset _presetTemplate;
    public VisualTreeAsset _avatarsTemplate;
    public VisualTreeAsset _avatarTemplate;
    public VisualTreeAsset _dialogTemplate;
    public VisualTreeAsset _optionTemplate;

    PanelRenderer _panelRenderer;
    List<UnityEngine.Object> _liveAssets;
    ScrollView _presetsView;
    ListView _avatarsView;
    ScrollView _dialogView;
    VisualElement _visibleContainer;

    void Awake()
    {
      _panelRenderer = GetComponent<PanelRenderer>();
      _liveAssets = new List<UnityEngine.Object>();
      _liveAssets.Add(_presetsTemplate);
      _liveAssets.Add(_presetTemplate);
      _liveAssets.Add(_avatarsTemplate);
      _liveAssets.Add(_avatarTemplate);
      _liveAssets.Add(_dialogTemplate);
      _liveAssets.Add(_optionTemplate);
    }

    void OnEnable()
    {
      _panelRenderer.postUxmlReload = BindScreen;
    }

    void OnDisable()
    {
      _panelRenderer.postUxmlReload = null;
    }

    public void SetPresets(List<Messages.Preset> presets)
    {
      _presetsView.Clear();

      foreach (Messages.Preset preset in presets)
      {
        _presetsView.Add(_presetTemplate.Instantiate());
      }
    }

    public void SetDialog(Messages.Dialog dialog)
    {
      var title = _dialogView.Q<Label>("title");
      var text = _dialogView.Q<Label>("text");
      var options = _dialogView.Q<VisualElement>("options");

      //title.text = dialog.title;
      //text.text = dialog.text;
      options.Clear();

      foreach (Messages.DialogOption dialogOption in dialog.options)
      {
        var option = _optionTemplate.Instantiate();
        var subtitle = option.Q<Label>("title");
        var subtext = option.Q<Label>("text");

        //subtitle.text = dialogOption.title;
        //subtext.text = dialogOption.text;

        options.Add(option);
      }
    }

    public void SetAvatars(List<Messages.Avatar> avatars)
    {
      _avatarsView.itemsSource = avatars;
      _avatarsView.Refresh();
    }

    IEnumerable<UnityEngine.Object> BindScreen()
    {
      var root = _panelRenderer.visualTree;

      var container = root.Q<VisualElement>("container");
      var tabPresets = root.Q<Button>("tab-presets");
      var tabAvatars = root.Q<Button>("tab-avatars");
      var tabDialog = root.Q<Button>("tab-dialog");

      var presetsContainer = _presetsTemplate.Instantiate();
      var avatarsContainer = _avatarsTemplate.Instantiate();
      var dialogContainer = _dialogTemplate.Instantiate();

      _presetsView = presetsContainer.Q<ScrollView>("presets");
      _avatarsView = avatarsContainer.Q<ListView>("avatars");
      _dialogView = dialogContainer.Q<ScrollView>("dialog");

      presetsContainer.Hide();
      avatarsContainer.Hide();
      _visibleContainer = dialogContainer;

      container.Add(presetsContainer);
      container.Add(avatarsContainer);
      container.Add(dialogContainer);

      tabPresets.clicked += () => { ShowContainer(presetsContainer); };
      tabAvatars.clicked += () => { ShowContainer(avatarsContainer); };
      tabDialog.clicked += () => { ShowContainer(dialogContainer); };

      return _liveAssets;
    }

    void ShowContainer(VisualElement element)
    {
      _visibleContainer.Hide();
      _visibleContainer = element;
      _visibleContainer.Show();
    }

    void MakeAvatar()
    {
    }

    void BindAvatar()
    {
    }
  }
}

using UnityEngine.UIElements;

namespace Jupiter
{
  public static class UIElementsExtensions
  {
    public static void Hide(this VisualElement element)
    {
      element.style.display = DisplayStyle.None;
    }

    public static void Show(this VisualElement element)
    {
      element.style.display = DisplayStyle.Flex;
    }
  }
}

Side question: Is the crappy text quality normal for now or can i do sth?

2

Hello, this looks like a bug that needs to be reported. Attaching your project or a minimal reproduction project would help greatly.

As for the text quality, this is on our radar and will be fixed in the official preview.

3

There you go.

4

Hello,

Sorry for the very long delay getting back to you on this.
Last month we have a released a new UI Toolkit package which replaces the old UIElements Runtime package:

The layout issue should be fixed now.
As for the text quality, it is still something we are working on along with a bunch of new text features that are closer to TextMesh Pro.

Thanks

1 Like