Resolved ScrollView Scaling Issues

I am trying to fit a horizontal Scrollview into a Node in GraphView.
my Problem is that instead of the Scrollview beeing fittet into the Node the Node gets rescaled such that all ScrollView Elements are Visible. In the Picture you can see the green ScrollView Elements all beeing drawn because the Node width got rescaled. The second Node on the bottom is how it should be scaled.


I cannot hardcode any pixel values for the Size of the Node since the Node still needs to adjust its width to the Elements inside the Input and Output Containers of the Node.
So what I am missing is a way to constrain the ScrollView within its ParentContainer (The ContentContainer of the Node) without the ScrollView scaling the Node and without setting any hard values to max-width etc.
Im not that experienced with UI code so pardon me if im wrong here but googling around a bit i think i would need something like "max-width: fit-content" for the ScrollView container. Is there another way to implement this?

 

Maybe if you set it's width to zero and it's min-width to 100%? I'm not sure. It's one of the things I'd try. It'd be useful to see the current layout and hierarchy.

 

Thank you! I somehow don't get it to work in GraphView but mocking it up in UIBuilder its exactly what I was looking for.

Here is a Working UXML example:

Code (CSharp):

1. <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">
2.     <ui:VisualElement name="GraphView" style="background-color: rgba(0, 0, 0, 0); height: 450px;">
3.         <ui:VisualElement name="Node" style="background-color: rgb(12, 0, 255); border-left-color: rgb(12, 0, 118); border-right-color: rgb(12, 0, 118); border-top-color: rgb(12, 0, 118); border-bottom-color: rgb(12, 0, 118); border-left-width: 10px; border-right-width: 10px; border-top-width: 10px; border-bottom-width: 10px; left: 100px; top: 100px; position: absolute;">
4.             <ui:VisualElement name="CanScaleNodeContainer" style="flex-direction: row;">
5.                 <ui:VisualElement name="InputContainer" style="flex-grow: 1; background-color: rgba(119, 255, 119, 0.74);">
6.                     <ui:Label tabindex="-1" text="InputContainer AnyText" display-tooltip-when-elided="true" />
7.                 </ui:VisualElement>
8.                 <ui:VisualElement name="OutputContainer" style="background-color: rgba(250, 131, 131, 0.75);">
9.                     <ui:Label tabindex="-1" text="OutputContainer  AnyTextAnyTextAnyText" display-tooltip-when-elided="true" style="min-width: 100px;" />
10.                 </ui:VisualElement>
11.             </ui:VisualElement>
12.             <ui:VisualElement name="CantScaleNodeContainer">
13.                 <ui:ScrollView mode="Horizontal" style="width: 0; min-width: 100%;">
14.                     <ui:Label tabindex="-1" text="LongerLabel" display-tooltip-when-elided="true" name="LongerLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
15.                     <ui:Label tabindex="-1" text="VeryLongLabel" display-tooltip-when-elided="true" name="VerlyLongLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
16.                     <ui:Label tabindex="-1" text="Label" display-tooltip-when-elided="true" name="LongerLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
17.                     <ui:Label tabindex="-1" text="VeryLongLabel" display-tooltip-when-elided="true" name="VerlyLongLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
18.                     <ui:Label tabindex="-1" text="LongerLabel" display-tooltip-when-elided="true" name="LongerLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
19.                     <ui:Label tabindex="-1" text="VeryLongLabel" display-tooltip-when-elided="true" name="VerlyLongLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
20.                     <ui:Label tabindex="-1" text="LongerLabel" display-tooltip-when-elided="true" name="LongerLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
21.                     <ui:Label tabindex="-1" text="VeryLongLabel" display-tooltip-when-elided="true" name="VerlyLongLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
22.                     <ui:Label tabindex="-1" text="LongerLabel" display-tooltip-when-elided="true" name="LongerLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
23.                     <ui:Label tabindex="-1" text="VeryLongLabel" display-tooltip-when-elided="true" name="VerlyLongLabel" style="background-color: rgb(228, 132, 44); border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; border-bottom-width: 2px;" />
24.                 </ui:ScrollView>
25.             </ui:VisualElement>
26.         </ui:VisualElement>
27.     </ui:VisualElement>
28. </ui:UXML>
29.  

The labels in the green and red Container control the width of the Node.
The ScrollView with the Orange Items is always contained inside that width.

 

Okay I finally got it working in GraphView.


The problem was I needed to set the ContentContainer to width = 0 and minWidth = 100 instead of the scrollView Element itself :

Code (CSharp):

1.  
2. var scrollView = new ScrollView(ScrollViewMode.Horizontal);
3. scrollView.contentContainer.style.width = new StyleLength(new Length(0, LengthUnit.Pixel));
4. scrollView.contentContainer.style.minWidth = new StyleLength(new Length(100, LengthUnit.Percent));

Note that width is set to 0px instead of 0%. With percent it does not work. Not sure if that is how it is supposed to be.