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. Dismiss Notice

how to style ScrollView?

Discussion in 'UI Toolkit' started by unitydungeonmas, Nov 11, 2020.

  1. unitydungeonmas

    unitydungeonmas

    Joined:
    Sep 6, 2020
    Posts:
    37
    I want to make the drag bar fatter, and I tried many combinations, is there a way to make it fatter as it is too thin right now?
     
  2. Arkenhammer

    Arkenhammer

    Joined:
    Nov 10, 2019
    Posts:
    51
    Here's the set of selectors I used to make the vertical scroll bar 60px wide. You can tweak the values to suit. For my scroll bars I also swapped out the arrow images and made some color tweaks. The CSS for the scroll bars uses absolute positioning rather than flex for all its layout so you end up having to override everything.

    Code (CSharp):
    1.  
    2. .unity-scroller--vertical {
    3.     width: 60px;
    4.     border-left-width: 2px;
    5. }
    6.  
    7. .unity-scroller--vertical > .unity-scroller__high-button {
    8.     width: 100%;
    9.     height: 60px;
    10. }
    11.  
    12. .unity-scroller--vertical > .unity-scroller__low-button {
    13.     width: 100%;
    14.     height: 60px;
    15. }
    16.  
    17. .unity-scroller--vertical > .unity-scroller__slider {
    18.     width: 100%;
    19.     margin-top: 70px;
    20.     margin-bottom: 70px;
    21. }
    22.  
    23. .unity-scroller--vertical .unity-base-slider__tracker {
    24.     width: 100%
    25. }
    26.  
    27. .unity-scroller--vertical .unity-base-slider__dragger {
    28.     width: 75%;
    29.     align-self: center;
    30. }
    31.  
     
  3. unitydungeonmas

    unitydungeonmas

    Joined:
    Sep 6, 2020
    Posts:
    37