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. Scrollbar handle with rounded edges?
Forum Updated to NodeBB v4.3 + New Features

Scrollbar handle with rounded edges?

Scheduled Pinned Locked Moved Solved General and Desktop
15 Posts 5 Posters 7.8k Views 3 Watching
  • 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.
  • T Taytoo

    0_1555699453971_Qt Creator Scrollbar.png

    Screenshot of Qt Creator on Mac, I'm trying to get this scrollbar rounded edges look on windows. Found this accepted answer on stackoverflow: https://stackoverflow.com/questions/12438095/qt-vertical-scroll-bar-stylesheets

    But it still results in flat edges?

    mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by mrjj
    #2

    @Taytoo
    Hi
    Im not sure how the gradients should make it round. At least didn't seem to work on Windows.
    However, you can do like ( only tested on windows, no macs here)
    alt text

    QScrollBar:vertical {
                border: 0px solid #999999;
                background:white;
                width:10px;    
                margin: 0px 0px 0px 0px;
            }
            QScrollBar::handle:vertical {         
           
                min-height: 0px;
              	border: 0px solid red;
    			border-radius: 4px;
    			background-color: black;
            }
            QScrollBar::add-line:vertical {       
                height: 0px;
                subcontrol-position: bottom;
                subcontrol-origin: margin;
            }
            QScrollBar::sub-line:vertical {
                height: 0 px;
                subcontrol-position: top;
                subcontrol-origin: margin;
            }
    

    one thing to notice, your border-radius: 4px; and the width:10px; should match up.
    if you make it too narrow, it wont be round.

    T 1 Reply Last reply
    1
    • T Taytoo

      0_1555699453971_Qt Creator Scrollbar.png

      Screenshot of Qt Creator on Mac, I'm trying to get this scrollbar rounded edges look on windows. Found this accepted answer on stackoverflow: https://stackoverflow.com/questions/12438095/qt-vertical-scroll-bar-stylesheets

      But it still results in flat edges?

      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by raven-worx
      #3

      @Taytoo
      taken the example with following modifications (marked 5 lines):

      setStyleSheet(QString::fromUtf8(
                                                  "QScrollBar:vertical {"
                                                  "    border: 1px solid #999999;"
                                                  "    background:white;"
                                                  "    width: 20px;" // <<<<<<<<<<<
                                                  "    margin: 0px 0px 0px 0px;"
                                                  "}"
                                                  "QScrollBar::handle:vertical {"
                                                  "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                  "    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));"
                                                  "    min-height: 0px;"
                                                  "    margin: 0px 4px 0px 4px;" // <<<<<<<<<<<
                                                  "    width: 10px;" // <<<<<<<<<<<
                                                  "    border-width: 1px;" // <<<<<<<<<<<
                                                  "    border-radius: 5px;" // <<<<<<<<<<<
                                                  "}"
                                                  "QScrollBar::add-line:vertical {"
                                                  "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                  "    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));"
                                                  "    height: 0px;"
                                                  "    subcontrol-position: bottom;"
                                                  "    subcontrol-origin: margin;"
                                                  "}"
                                                  "QScrollBar::sub-line:vertical {"
                                                  "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                  "    stop: 0  rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));"
                                                  "    height: 0 px;"
                                                  "    subcontrol-position: top;"
                                                  "    subcontrol-origin: margin;"
                                                  "}"
                                                  ));
      

      Note that when the border-radius value is set too high it will appear flat again. It should be less than the half of the width.

      @mrjj
      lol, same answer. I didnt notice you already replied while it took me some minutes to write the answer :)

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      mrjjM 1 Reply Last reply
      2
      • raven-worxR raven-worx

        @Taytoo
        taken the example with following modifications (marked 5 lines):

        setStyleSheet(QString::fromUtf8(
                                                    "QScrollBar:vertical {"
                                                    "    border: 1px solid #999999;"
                                                    "    background:white;"
                                                    "    width: 20px;" // <<<<<<<<<<<
                                                    "    margin: 0px 0px 0px 0px;"
                                                    "}"
                                                    "QScrollBar::handle:vertical {"
                                                    "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                    "    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130), stop:1 rgb(32, 47, 130));"
                                                    "    min-height: 0px;"
                                                    "    margin: 0px 4px 0px 4px;" // <<<<<<<<<<<
                                                    "    width: 10px;" // <<<<<<<<<<<
                                                    "    border-width: 1px;" // <<<<<<<<<<<
                                                    "    border-radius: 5px;" // <<<<<<<<<<<
                                                    "}"
                                                    "QScrollBar::add-line:vertical {"
                                                    "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                    "    stop: 0 rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));"
                                                    "    height: 0px;"
                                                    "    subcontrol-position: bottom;"
                                                    "    subcontrol-origin: margin;"
                                                    "}"
                                                    "QScrollBar::sub-line:vertical {"
                                                    "    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
                                                    "    stop: 0  rgb(32, 47, 130), stop: 0.5 rgb(32, 47, 130),  stop:1 rgb(32, 47, 130));"
                                                    "    height: 0 px;"
                                                    "    subcontrol-position: top;"
                                                    "    subcontrol-origin: margin;"
                                                    "}"
                                                    ));
        

        Note that when the border-radius value is set too high it will appear flat again. It should be less than the half of the width.

        @mrjj
        lol, same answer. I didnt notice you already replied while it took me some minutes to write the answer :)

        mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by
        #4

        @raven-worx
        hehe, yep it doesn't refresh while the editor is open so while going to check docs
        to paste something, it does happen someone already posted an answer.
        However, there is often slight variations, like your answer is better suited to set from
        code while mine is just from the stylesheet editor. So in my book, its rarely
        wasted efforts anyway :)

        1 Reply Last reply
        0
        • mrjjM mrjj

          @Taytoo
          Hi
          Im not sure how the gradients should make it round. At least didn't seem to work on Windows.
          However, you can do like ( only tested on windows, no macs here)
          alt text

          QScrollBar:vertical {
                      border: 0px solid #999999;
                      background:white;
                      width:10px;    
                      margin: 0px 0px 0px 0px;
                  }
                  QScrollBar::handle:vertical {         
                 
                      min-height: 0px;
                    	border: 0px solid red;
          			border-radius: 4px;
          			background-color: black;
                  }
                  QScrollBar::add-line:vertical {       
                      height: 0px;
                      subcontrol-position: bottom;
                      subcontrol-origin: margin;
                  }
                  QScrollBar::sub-line:vertical {
                      height: 0 px;
                      subcontrol-position: top;
                      subcontrol-origin: margin;
                  }
          

          one thing to notice, your border-radius: 4px; and the width:10px; should match up.
          if you make it too narrow, it wont be round.

          T Offline
          T Offline
          Taytoo
          wrote on last edited by
          #5

          @mrjj said in Scrollbar handle with rounded edges?:

          QScrollBar:vertical {
                      border: 0px solid #999999;
                      background:white;
                      width:10px;    
                      margin: 0px 0px 0px 0px;
                  }
                  QScrollBar::handle:vertical {         
                 
                      min-height: 0px;
                    	border: 0px solid red;
          			border-radius: 4px;
          			background-color: black;
                  }
                  QScrollBar::add-line:vertical {       
                      height: 0px;
                      subcontrol-position: bottom;
                      subcontrol-origin: margin;
                  }
                  QScrollBar::sub-line:vertical {
                      height: 0 px;
                      subcontrol-position: top;
                      subcontrol-origin: margin;
                  }
          

          one thing to notice, your border-radius: 4px; and the width:10px; should match up.
          if you make it too narrow, it wont be round.

          It's working, but I'm unable to change the scrollbar's (not handle) background color.It's set to white, when I change it to Gray, the background becomes checkered. Also, tried adding background-color in add-line/sub-line but didn't work.

          KillerSmathK 1 Reply Last reply
          0
          • T Taytoo

            @mrjj said in Scrollbar handle with rounded edges?:

            QScrollBar:vertical {
                        border: 0px solid #999999;
                        background:white;
                        width:10px;    
                        margin: 0px 0px 0px 0px;
                    }
                    QScrollBar::handle:vertical {         
                   
                        min-height: 0px;
                      	border: 0px solid red;
            			border-radius: 4px;
            			background-color: black;
                    }
                    QScrollBar::add-line:vertical {       
                        height: 0px;
                        subcontrol-position: bottom;
                        subcontrol-origin: margin;
                    }
                    QScrollBar::sub-line:vertical {
                        height: 0 px;
                        subcontrol-position: top;
                        subcontrol-origin: margin;
                    }
            

            one thing to notice, your border-radius: 4px; and the width:10px; should match up.
            if you make it too narrow, it wont be round.

            It's working, but I'm unable to change the scrollbar's (not handle) background color.It's set to white, when I change it to Gray, the background becomes checkered. Also, tried adding background-color in add-line/sub-line but didn't work.

            KillerSmathK Offline
            KillerSmathK Offline
            KillerSmath
            wrote on last edited by
            #6

            @Taytoo
            Have you already check out the QT StyleSheet examples on Qt Documentation ?
            https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qscrollbar

            @Computer Science Student - Brazil
            Web Developer and Researcher
            “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

            1 Reply Last reply
            0
            • mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #7

              Hi
              Its actually not the background but sub-page and add-page you see. if you remove color from them , then
              background works.

              add to stylesheet

              QScrollBar::sub-page:vertical {
              background: none;
              }

              QScrollBar::add-page:vertical {
              background: none;
              }

              alt text

              1 Reply Last reply
              3
              • T Offline
                T Offline
                Taytoo
                wrote on last edited by
                #8

                @mrjj said in Scrollbar handle with rounded edges?:

                QScrollBar::sub-page:vertical {
                background: none;
                }
                QScrollBar::add-page:vertical {
                background: none;
                }

                Working great.

                However, I also tried this on QTreeWidget, Qt Designer shows correct scrollbar but when I run the application, its showing standard windows scrollbar?

                and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?

                mrjjM 1 Reply Last reply
                0
                • T Taytoo

                  @mrjj said in Scrollbar handle with rounded edges?:

                  QScrollBar::sub-page:vertical {
                  background: none;
                  }
                  QScrollBar::add-page:vertical {
                  background: none;
                  }

                  Working great.

                  However, I also tried this on QTreeWidget, Qt Designer shows correct scrollbar but when I run the application, its showing standard windows scrollbar?

                  and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by
                  #9

                  @Taytoo
                  Hi. it should also work for QTreeWidget.
                  Do you apply it directly to it or to its parent ?

                  -and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?

                  You mean they are hidden but only shows when mouse is over ?
                  lineEdits cannto have scrollbars.

                  T 1 Reply Last reply
                  0
                  • mrjjM mrjj

                    @Taytoo
                    Hi. it should also work for QTreeWidget.
                    Do you apply it directly to it or to its parent ?

                    -and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?

                    You mean they are hidden but only shows when mouse is over ?
                    lineEdits cannto have scrollbars.

                    T Offline
                    T Offline
                    Taytoo
                    wrote on last edited by
                    #10

                    @mrjj said in Scrollbar handle with rounded edges?:

                    @Taytoo
                    Hi. it should also work for QTreeWidget.
                    Do you apply it directly to it or to its parent ?

                    I applied stylesheet to QTreeWidget

                    -and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?
                    You mean they are hidden but only shows when mouse is over ?

                    Yes

                    lineEdits cannto have scrollbars.

                    typo...I meant QPlainTextEdit

                    mrjjM 1 Reply Last reply
                    0
                    • T Taytoo

                      @mrjj said in Scrollbar handle with rounded edges?:

                      @Taytoo
                      Hi. it should also work for QTreeWidget.
                      Do you apply it directly to it or to its parent ?

                      I applied stylesheet to QTreeWidget

                      -and is it possible to have scrollbar only disable when mouse enters the widget scrollbar is attached to e.g. on line edit or treewidget?
                      You mean they are hidden but only shows when mouse is over ?

                      Yes

                      lineEdits cannto have scrollbars.

                      typo...I meant QPlainTextEdit

                      mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by
                      #11

                      @Taytoo
                      Hi
                      can you try applying it to main window instead.
                      (i assume the QTreeWidget lives in mainwin)

                      Well show on hover thing is not included by default.
                      I think you can make it work by overriding Enter/Leave
                      events
                      https://doc.qt.io/qt-5/qwidget.html#enterEvent
                      and show hide the scrollbars.
                      If you dont want to subclass, you can also try with
                      Event filter
                      https://doc.qt.io/qt-5/eventsandfilters.html

                      .

                      T 1 Reply Last reply
                      1
                      • mrjjM mrjj

                        @Taytoo
                        Hi
                        can you try applying it to main window instead.
                        (i assume the QTreeWidget lives in mainwin)

                        Well show on hover thing is not included by default.
                        I think you can make it work by overriding Enter/Leave
                        events
                        https://doc.qt.io/qt-5/qwidget.html#enterEvent
                        and show hide the scrollbars.
                        If you dont want to subclass, you can also try with
                        Event filter
                        https://doc.qt.io/qt-5/eventsandfilters.html

                        .

                        T Offline
                        T Offline
                        Taytoo
                        wrote on last edited by Taytoo
                        #12

                        @mrjj That worked. Thanks!

                        One would assume since scrollbar is in QTreeWidget, the style needs to be applied there though?

                        PS. I wanted to mark your post as the answer/solution, but the forum only allows me to mark my post as the answer?

                        1 Reply Last reply
                        0
                        • SGaistS Offline
                          SGaistS Offline
                          SGaist
                          Lifetime Qt Champion
                          wrote on last edited by
                          #13

                          Hi,

                          @Taytoo said in Scrollbar handle with rounded edges?:

                          PS. I wanted to mark your post as the answer/solution, but the forum only allows me to mark my post as the answer?

                          That's a NodeBB issue. What answer did you want to mark as the solution ?

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

                          T 1 Reply Last reply
                          0
                          • SGaistS SGaist

                            Hi,

                            @Taytoo said in Scrollbar handle with rounded edges?:

                            PS. I wanted to mark your post as the answer/solution, but the forum only allows me to mark my post as the answer?

                            That's a NodeBB issue. What answer did you want to mark as the solution ?

                            T Offline
                            T Offline
                            Taytoo
                            wrote on last edited by
                            #14

                            @SGaist mrjj's first reply to my post answered the main question. Later posts were all about tweaks, so I guess first reply is the answer.

                            1 Reply Last reply
                            0
                            • SGaistS Offline
                              SGaistS Offline
                              SGaist
                              Lifetime Qt Champion
                              wrote on last edited by
                              #15

                              Done :-)

                              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
                              1

                              • Login

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