Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Stylesheet for scrollbar in QScrollArea

Stylesheet for scrollbar in QScrollArea

Scheduled Pinned Locked Moved Unsolved General and Desktop
5 Posts 5 Posters 14.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    eukr
    wrote on 12 Aug 2018, 06:08 last edited by
    #1

    Hello, how can i set qss style for scrollbar in QScrollArea.

    What i have tried..
    In qss for QScrollArea i set code from documentation:

    QScrollBar:vertical {
        border: 2px solid grey;
        background: #32CC99;
        height: 15px;
        margin: 0px 20px 0 20px;
    }
    QScrollBar::handle:vertical {
        background: white;
        min-width: 20px;
    }
    QScrollBar::add-line:vertical {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: right;
        subcontrol-origin: margin;
    }
    
    QScrollBar::sub-line:vertical {
        border: 2px solid grey;
        background: #32CC99;
        width: 20px;
        subcontrol-position: left;
        subcontrol-origin: margin;
    }
    

    But nothing.. scrollbar in QScrollArea still have standard style.

    1 Reply Last reply
    0
    • S Offline
      S Offline
      SGaist
      Lifetime Qt Champion
      wrote on 12 Aug 2018, 21:54 last edited by
      #2

      Hi,

      How are you setting that style sheet ?
      How are you creating your QScrollArea ?

      What version of Qt are you using ?
      On what platform ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • S Offline
        S Offline
        Swapnil_Shelke
        wrote on 13 Aug 2018, 12:59 last edited by
        #3

        Below is my working code cor Vertical Scroll Bar

        QScrollBar:vertical {border-color: #424242;border-width: 1px;border-style: solid;
            background-color: #32CC99;width: 25px;margin: 21px 0 21px 0;
            QScrollBar::handle:vertical {background-color:white ;min-height: 25px;}
            QScrollBar::add-line:vertical {border: 2px solid black;background-color: #32CC99;
            height: 25px;subcontrol-position: bottom;subcontrol-origin: margin;}
            QScrollBar::sub-line:vertical {border: 2px solid black;background-color: #32CC99;
            height: 25px;subcontrol-position: top;subcontrol-origin: margin;}
        

        the code you are using is for Horizontal scroll bar i think so, as for vertical scroll bar margin should be

        margin: 20px 0px 20px 0px;
        

        Hope this helps .

        1 Reply Last reply
        0
        • N Offline
          N Offline
          NikM
          wrote on 1 Feb 2021, 15:36 last edited by NikM 2 Jan 2021, 15:38
          #4

          Hello, I have same trouble.
          I use QtDesigner to create .ui files and VS Code to run PySide6 code.
          This is my QSS code.

          QScrollBar:vertical {
          	border: none;
          	background: rgb(75, 75, 75);
          	width: 14px;
          	margin: 15px 0 15px 0;
          	border-radius: 0px;
          }
          

          I set style sheet and create QScrollArea in QtDesigner.
          Preview in QtDesigner can show this options on my QScrollBar, but when I run my Python code with this form I see default scroll. Where did I go wrong?

          A 1 Reply Last reply 5 Jul 2021, 21:29
          0
          • N NikM
            1 Feb 2021, 15:36

            Hello, I have same trouble.
            I use QtDesigner to create .ui files and VS Code to run PySide6 code.
            This is my QSS code.

            QScrollBar:vertical {
            	border: none;
            	background: rgb(75, 75, 75);
            	width: 14px;
            	margin: 15px 0 15px 0;
            	border-radius: 0px;
            }
            

            I set style sheet and create QScrollArea in QtDesigner.
            Preview in QtDesigner can show this options on my QScrollBar, but when I run my Python code with this form I see default scroll. Where did I go wrong?

            A Offline
            A Offline
            aditya_mehta
            wrote on 5 Jul 2021, 21:29 last edited by
            #5

            @NikM Hi, did you fix the error, even I see the customized bar in designer but it rolls back to default style when I preview the widget. I saw a post on stackoverflow too: https://stackoverflow.com/questions/66557285/my-pyqt5-custom-scrollbar-stylesheet-doesnt-apply but, didn't quite understand what parent element meant.

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved