Search Unity

What is alternative of ScrollView.stretchContentWidth ?

Discussion in 'UI Toolkit' started by Kichang-Kim, Jan 21, 2019.

  1. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,011
    Hi, I tested Unity 2019.1 alpha and found that ScrollView.stretchContentWidth property is gone away.

    How to handle ScrollView.stretchContentWidth for latest UIElements?
     
    Kichang-Kim, Jan 21, 2019
    #1

  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi, the ScrollView was improved for 2019.1 and stretchContentWidth is not necessary anymore, the content will stretch by default.

    Also, there's a new ScrollViewMode enum that allow 3 types of scrolling like vertical or horizontal.
     
    jonathanma_unity, Jan 21, 2019
    #2

  3. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,011
    @jonathanma_unity Thanks for reply. I found that if the width of content is bigger than its parent, stretch behaviour is different to stretchContentWidth option. (see attached screenshot)

    To get the same result to "scrollView.stretchContentWidth = true;", I need to add "scrollView.contentContainer.StretchToParentWidth();" on 2019.1 alpha. Is this intended behaviour?
     

    Attached Files:

    Kichang-Kim, Jan 22, 2019
    #3

  4. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    From what I can see in your left example it looks like the ScrollView is set to the VerticalHorizontal mode which allow scrolling in both direction. Since the TextField content overflow you get the horizontal scroller so you can scroll to see all the content.

    The default ScrollView mode is Vertical and will not show the horizontal scroller, you would need to scroll in the TextField itself which should be similar to the right example.

    Doing "scrollView.contentContainer.StretchToParentWidth();" has the side effect of setting the content container position to absolute which can lead to other issues. The most common one being that the ScrollView will not grow based on it's content, setting an height or flex-grow might be required.

    Finally, the reason you don't see a scroller on the right is because StretchToParentWidth snap left and right positions to it's parent so it will never overflow.
     
    jonathanma_unity, Jan 22, 2019
    #4
    Kichang-Kim likes this.

  5. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,011
    @jonathanma_unity I tested simple case like this:
    Code (CSharp):
    1. private void OnEnable()
    2.     {
    3.         var root = this.GetRootVisualContainer();
    4.  
    5.         var scrollView = new ScrollView();
    6.         root.Add(scrollView);
    7.  
    8.         for (int i = 0; i < 30; i++)
    9.         {
    10.             var label = new Label("THIS IS LONG TEXT. THIS IS LONG TEXT. THIS IS LONG TEXT. THIS IS LONG TEXT.");
    11.             label.style.wordWrap = true;
    12.             scrollView.Add(label);
    13.         }
    14.     }
    As your explanation, this code should render scroll view without horizontal scollbar (becase the default value of scroll mode is vertical). But actually, this shows both horizontal and vertical scrollbar, and wordWrap does not work.

    Also, I can't find any property or method for changing scroll view mode of ScrollView class. Any ideas?

    Thanks.
     

    Attached Files:

    Kichang-Kim, Jan 23, 2019
    #5

  6. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Previous explanation apply to the non experimental version of UIElements that is available on 2019.1.

    Your example is using the experimental API and I believe that StretchToParentWidth would be the way to go on that version. However, as explained above I recommend not doing that if you move out of the experimental API.
     
    jonathanma_unity, Jan 23, 2019
    #6
    Kichang-Kim likes this.

  7. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,011
    Non experimental version of ScrollView works exactly as your explanation. Only missing parts is wordwrap property for Label. I'll wait for full documentation and stable release of Unity 2019.1. :)
     
    Kichang-Kim, Jan 24, 2019
    #7

  8. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Last edited: Jan 24, 2019
    jonathanma_unity, Jan 24, 2019
    #8
    Kichang-Kim likes this.