Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Resolved ScrollView content elements could not shrink properly

Discussion in 'UI Toolkit' started by curtispelissier, Dec 22, 2022.

  1. curtispelissier

    curtispelissier

    Joined:
    Jul 26, 2019
    Posts:
    39
    Hello,

    I'm currently working on Unity 2022.2.1f1 and I cannot find any way to let my elements inside de ScrollView adapt their own height properly.

    When I set the `flex-shrink` to 1, all my content try to fit inside the container (even if there is not enough space), and when I set it to 0, elements don't fit on the width (the `flex-grow` value changes nothing) :

    upload_2022-12-22_12-9-12.png

    Code (JavaScript):
    1.  
    2. <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">
    3.     <Style src="./TestScrollView.uss?fileID=7433441132597879392&amp;guid=1581e7ab419e3b544a5187d62c81326c&amp;type=3#TestScrollView" />
    4.     <ui:ScrollView scroll-deceleration-rate="0,135" elasticity="0,1" name="PageOne" vertical-page-size="1" nested-interaction-kind="ForwardScrolling" horizontal-scroller-visibility="Hidden" style="flex-basis: 0;">
    5.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    6.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    7.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    8.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    9.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    10.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    11.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    12.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    13.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    14.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    15.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    16.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    17.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    18.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    19.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    20.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    21.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    22.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    23.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    24.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    25.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    26.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    27.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    28.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    29.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    30.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    31.     </ui:ScrollView>
    32.     <TabbedView>
    33.         <TabButton focusable="true" />
    34.         <ui:Button text="Button" display-tooltip-when-elided="true" />
    35.     </TabbedView>
    36.     <TabbedView>
    37.         <TabButton focusable="true" />
    38.     </TabbedView>
    39. </ui:UXML>
    40.  
    Code (JavaScript):
    1. .unity-button {
    2.     flex-shrink: 0;
    3. }
    4.  
    5. .unity-scroll-view {
    6.     flex-grow: 1;
    7.     overflow: hidden;
    8. }
    9.  
    10. .unity-scroll-view__content-container {
    11.     flex-direction: column;
    12.     flex-wrap: nowrap;
    13. }

    I don't want to set the width of my elements in pixels, I want them to fit perfectly the allowed width of their container/screen. And using `width: 100%` doesn't work either. Is this a bug or something I'm missing?
     

    Attached Files:

    curtispelissier, Dec 22, 2022
    #1

  2. curtispelissier

    curtispelissier

    Joined:
    Jul 26, 2019
    Posts:
    39
    Ok, after some researches, I found that I was not using the UnityDefaultRuntimeTheme style sheet in mine.
     
    curtispelissier, Dec 22, 2022
    #2