VisualElements : How to stretch the content of a Tab to fit the editor window?

Hi, I’m working on a TabView to display a different GraphView in each of its Tabs :

TabView tabView = new();
tabView.parent = rootVisualElement;

foreach (DialogueAssetSO dialogue in dialogues)
{
    Tab tab = new Tab();
    tab.parent = tabView;

    
    DialogueEditorGraphView graphView = new DialogueEditorGraphView();
    graphView.AddToClassList("graphView", "stretch");
    tab.Add(graphView);
    graphView.Add(new Label(AssetDatabase.GetAssetPath(dialogue)));
}

For now, the DialogueEditorGraphView only displays a GridBackground. Since the graphView doesn’t have a default width nor height, I’ve set up some styling like so:


.graphView
{	
        /*temporary to make sure the graphView was visible*/
	width: 500px;
	height: 500px;
}

:GridBackground
{	
	--grid-background-color: #222222;
	--line-color: #222222;
	--thick-line-color: #222222;
	--spacing: 20;
}

.stretch
{
    flex-grow: 1;
    position-type: absolute;
    position-left: 0;
    position-top: 0;
    position-right: 0;
    position-bottom: 0;
}

Now, I want to replace the “graphView” class with the “stretch” class. But doing so yields no results, I do not know how to make the Tab’s child grow with the rootVisualElement itself. Any help would be welcome.

You don’t seem to add graphView to anything though?

Though normally you’d just set flex-grow to 1 so it expands to fill its parent.

Hi, sorry, in my example I forgot to add the graphView indeed. In my actual code I use extension methods to create and parent VisualElements more easily, I just forgot to manually add it here. I’ll fix it right now.

I’ve tried to use flex-grow, but it only works for the direct parent, and since the Tab doesn’t stretch to fit the window, the graphView doesn’t seem to be able to do just that.

I recommend looking at it with the UI Toolkit Debugger, to see what the parents are and how they are layouted.

The TabView uses a few internal elements and all of them need flex-grow: 1 for your content to be able to fill the TabView’s parent.

Instead of adding classes, I’ve styled them like this:

/* Make TabView fill whole window */
TabView, .unity-tab-view__content-container, Tab, .unity-tab__content-container {
    flex-grow: 1;
}
1 Like

A few additional lines are bound to be written depending on what you wish to achieve, but you might want rely on what the Editor thinks it’s showing (e.g. rect.width) and just calculate sizes-of and adjust your elements accordingly; clearly — once you get the width — you should be able to adjust the elements to your liking; and also GUILayout.FlexibleSpace(); does wonders for whatever bit is left and you do not feel like calculating in particular. The following code just writes in the inspector window its dimensions for the ‘MyClass’ component. Might opt to run something similar and resize the window just to verify you are indeed getting proper current dimensions.

using UnityEditor;
[CustomEditor(typeof(MyClass))]
public class EditorMyClass : Editor
{
    Rect rect;
    public override void OnInspectorGUI()
    {
        // RECT INFO
        EditorGUILayout.LabelField($"rect {rect.width}x{rect.height}", GUILayout.Width(100));
    }
}

Hi, your solution worked perfectly. I just assumed the TabView already had a flex-grow attribute, and that the Tabs shouldn’t have one to prevent them from stretching through the entire window. Thank you everyone for your time.

Is this an AI post? This thread is about UI Toolkit but this is some weird generic post about IMGUI.