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!

ScrollView - auto layout

Discussion in 'UI Toolkit' started by XGT08, Sep 3, 2019.

  1. XGT08

    XGT08

    Joined:
    Aug 1, 2013
    Posts:
    1,845
    Hello,

    I am implementing a scroll view in which I have to draw prefab previews. Currently, I am using buttons as placeholders until I have the preview code in place. The problem is that I can't get the buttons to arrange themselves nicely. With IMGUI, the scroll view would place all items on the same row and start a new row when there was no more space. With UIElements it always places them on one column, one button below the other.

    Messing around with the flexDirection doesn't seem to help. So I was wondering how I can have the buttons sit on one row and then automatically start a new row when there is no more room?

    Thanks,
    Andrew
     
    XGT08, Sep 3, 2019
    #1

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    Try setting 
    containerElement.style.flexWrap = Wrap.Wrap;
    , using the row flex direction.

    Also, have you tried using the 
    ScrollView
    that comes with UIElements?
     
    uDamian, Sep 3, 2019
    #2

  3. XGT08

    XGT08

    Joined:
    Aug 1, 2013
    Posts:
    1,845
    Hi uDamian,

    It's the UIElements ScrollView I am talking about. I did the following:
    Code (CSharp):
    1.            
    2.             _prefabScrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
    3.             _prefabScrollView.style.flexDirection = FlexDirection.Row;
    4.             _prefabScrollView.style.flexWrap = Wrap.Wrap;
    5.             _rootVisualElement.Add(_prefabScrollView);
    Not working. I am using Unity 2019.3.0b1.
     
    XGT08, Sep 3, 2019
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    You should not use 
    ScrollViewMode.VerticalAndHorizontal
    if you want Wrapping to work. You can't have it both ways. You either limit the horizontal space and allow wrapping to occur or you don't limit the horizontal space and allow scrolling to occur.
     
    uDamian, Sep 3, 2019
    #4

  5. XGT08

    XGT08

    Joined:
    Aug 1, 2013
    Posts:
    1,845
    I have tried removing the VerticalAndHorizontal parameter and also tried changing it to Vertical only and I get the same result. Nothing changes. The flex parameters are simply ignored. The buttons appear in one column, one button below the other.
     
    XGT08, Sep 3, 2019
    #5

  6. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    Sorry, try setting the Flex.Wrap/FlexDirection on 
    myScrollView.contentContainer
    instead of the ScrollView itself.
     
    uDamian, Sep 3, 2019
    #6
    valerii540, SonicBloomEric and XGT08 like this.

  7. XGT08

    XGT08

    Joined:
    Aug 1, 2013
    Posts:
    1,845
    Wooohoooo! IT WORKS!!!!!!:cool: Thanks!
     
    XGT08, Sep 3, 2019
    #7

  8. 479813005

    479813005

    Joined:
    Mar 18, 2015
    Posts:
    58
    for everyone,don't forget to set overflow.
    Snipaste_2020-01-06_16-22-36.png
     
    479813005, Jan 6, 2020
    #8
    Hauthorn likes this.