Missing or Improperly Sized Elements

Unity Engine
1

I’m having a couple of issues.

Issue 1

I’ve got a very basic setup with a GameObject added which has a UI Document and Input System Event System (UI Toolkit) added. The source asset looks like this:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement name="container" style="flex-grow: 0; flex-direction: row; height: 15%; border-bottom-width: 3px; border-bottom-color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.2); min-height: auto; max-height: none; border-top-width: 3px; margin-top: 0; border-top-color: rgb(255, 255, 255);">
        <ui:VisualElement name="players-container" style="height: auto; width: 15%; border-left-width: 0; border-right-width: 3px; border-left-color: rgb(188, 188, 188); border-right-color: rgb(188, 188, 188); border-top-color: rgb(188, 188, 188); border-bottom-color: rgb(188, 188, 188);">
            <ui:ListView focusable="true" name="players-list" style="flex-grow: 1;" />
        </ui:VisualElement>
        <ui:VisualElement name="inventories-container" style="height: auto; width: 15%; border-left-width: 0; border-right-width: 3px; border-left-color: rgb(188, 188, 188); border-right-color: rgb(188, 188, 188); border-top-color: rgb(188, 188, 188); border-bottom-color: rgb(188, 188, 188);">
            <ui:ListView focusable="true" name="inventories-list" style="flex-grow: 1;" />
        </ui:VisualElement>
        <ui:VisualElement name="detail-container" style="flex-grow: 1;">
            <ui:ListView focusable="true" name="detail-list" item-height="75" style="flex-grow: 1;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

What I expect to see is that the element takes up 15% of the play window starting at the top. What is actually happening is that the white 3px border shows up and nothing else - there is no height to the element. If I set a pixel height to something like 100px, then it does have a height on screen. Why does the percentage-based height not work?

Issue 2

I’ve got a script that adds buttons to the first section based on the number of players. The code runs fine, but there are no buttons in the UI, even when I set a fixed pixel height. What is extra weird is that where the button should be (in the above element), there is nothing visible, yet clicking in the area still performs the click event and I see the debug log.

public class InventoryDebugger : MonoBehaviour
{
    private UIDocument doc;
    private VisualElement root;
    private ListView playersList;

    private void OnEnable()
    {
        doc = GetComponent<UIDocument>();
        root = doc.rootVisualElement;
    }

    private void Start()
    {
        UpdatePlayerList();
    }

    void UpdatePlayerList()
    {
        playersList = root.Q<ListView>("players-list");

        var allPlayers = FindObjectsOfType<Player>();

        playersList.itemsSource = allPlayers;
        playersList.makeItem = () =>
        {
            return new Button();
        };
        playersList.bindItem = (e, i) =>
        {
            var button = (Button)e;
            var player = allPlayers[i];

            button.style.flexGrow = 1;
            button.style.fontSize = 10;
            button.text = player.playerId.ToString();
            button.clicked += () =>
            {
                Debug.Log($"Player {player.playerId} selected.");
            };
        };
        playersList.itemHeight = 30;
        playersList.Refresh();
    }
}

Even more strange, this was working last night - the document was taking up 15% of the screen as expected, and the buttons were visible in the ListView. I did not change anything this morning - I merely reopened Unity and Visual Studio. My Git status is clean. I know this is in preview and I expect issues, but this one kind of has me stuck. I appreciate any help anyone can provide.

2

Well, right after I posted this, I fixed the issue. I had to create a new Panel Settings Asset and update the Panel Settings reference in the UI Document. I’m not sure why - I didn’t make any changes there, and it worked last night. :eyes: