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. QScrollBar vertical scrollbar set width
Forum Updated to NodeBB v4.3 + New Features

QScrollBar vertical scrollbar set width

Scheduled Pinned Locked Moved Solved General and Desktop
18 Posts 3 Posters 5.2k Views 2 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.
  • SPlattenS Offline
    SPlattenS Offline
    SPlatten
    wrote on last edited by
    #1

    I and working to a specification where the requirement is to have a vertical scrollbar that is only something like 4 pixels wide, is this achievable with the QScrollBar widget?

    I've added:

    QScrollBar* pScrollBar(new QScrollBar(this));
    mpui->pgrdloContent(pScrollBar, 1, 3);
    QRect rctGeom(pScrollBar->geometry());
    rctGeom.setWidth(rctGeom.width() / 2));
    pScrollBar->serGeometry(rctGeom);
    

    The above adds the scrollbar to a QGridLayout in row 1, column 3, however the width doesn't seem to be effected at all.

    Kind Regards,
    Sy

    1 Reply Last reply
    0
    • hskoglundH Offline
      hskoglundH Offline
      hskoglund
      wrote on last edited by
      #2

      Hi, try:

      pScrollBar->setStyleSheet("QScrollBar:vertical { width: 4px; }");
      
      

      note: using setStyleSheet can shortcircuit other custom settings you apply on the scrollbar

      SPlattenS 1 Reply Last reply
      4
      • hskoglundH hskoglund

        Hi, try:

        pScrollBar->setStyleSheet("QScrollBar:vertical { width: 4px; }");
        
        

        note: using setStyleSheet can shortcircuit other custom settings you apply on the scrollbar

        SPlattenS Offline
        SPlattenS Offline
        SPlatten
        wrote on last edited by
        #3

        @hskoglund , excellent, that worked!, now is there anyway to hide the up and down buttons as they are now quite wrong and not required ?

        Kind Regards,
        Sy

        1 Reply Last reply
        0
        • hskoglundH Offline
          hskoglundH Offline
          hskoglund
          wrote on last edited by
          #4

          To hide the up/down buttons, perhaps try setting their height to 0, with two more setStyleSheet() invocations, say "QScrollBar:up-arrow { height: 0px; }" and "QScrollBar:down-arrow {height: 0px; }"

          You're sure you don't want a vertical QSlider instead? might be better suited

          SPlattenS 1 Reply Last reply
          1
          • hskoglundH hskoglund

            To hide the up/down buttons, perhaps try setting their height to 0, with two more setStyleSheet() invocations, say "QScrollBar:up-arrow { height: 0px; }" and "QScrollBar:down-arrow {height: 0px; }"

            You're sure you don't want a vertical QSlider instead? might be better suited

            SPlattenS Offline
            SPlattenS Offline
            SPlatten
            wrote on last edited by SPlatten
            #5

            @hskoglund , tried that, didn't work, also found this:
            https://stackoverflow.com/questions/49890692/how-to-remove-qscrollbar-scroll-buttons

            Tried that too, didn't work. I need a scrollbar because it needs to shot the proportion of the image on view.

            Also tried:
            https://doc.qt.io/archives/qt-4.8/stylesheet-examples.html#customizing-qscrollbar

            None of those work either, the only thing that does work is changing the width using the style. I'm using Qt 5.9.2.

            So far this is what I've tried:

            mpScrollBar->setStyleSheet("QScrollBar::vertical{width: 4px;}"
                                       "QScrollBar::handle:vertical,"
                                       "QScrollBar::add-line:vertical,"
                                       "QScrollBar::sub-line:vertical,"
                                       "QScrollBar::up-arrow:vertical,"
                                       "QScrollBar::down-arrow:vertical"
                                       "{height: 0px;display:none;}");
            

            Only the width is set, everything else isn't working.

            Kind Regards,
            Sy

            1 Reply Last reply
            0
            • hskoglundH Offline
              hskoglundH Offline
              hskoglund
              wrote on last edited by
              #6

              Hmm, if you're anyway off into setStyleSheet() land, if the only thing keeping you from using a QSlider is the proportional stuff, then you could try applying setStyleSheet() on QSlider instead, say:

              mpSlider->setStyleSheet(QString(
                      ".QSlider::groove { background: transparent; height: %1px; } "
                      ".QSlider::handle { height: %2px;}").arg(scrollbarHeight).arg(thumbHeight));
              

              you'll have to calculate the thumbHeight (i.e. the movable part of the slider) from the proportion of the image compared to the view, but this approach might be more fruitful :-)

              SPlattenS 3 Replies Last reply
              1
              • hskoglundH hskoglund

                Hmm, if you're anyway off into setStyleSheet() land, if the only thing keeping you from using a QSlider is the proportional stuff, then you could try applying setStyleSheet() on QSlider instead, say:

                mpSlider->setStyleSheet(QString(
                        ".QSlider::groove { background: transparent; height: %1px; } "
                        ".QSlider::handle { height: %2px;}").arg(scrollbarHeight).arg(thumbHeight));
                

                you'll have to calculate the thumbHeight (i.e. the movable part of the slider) from the proportion of the image compared to the view, but this approach might be more fruitful :-)

                SPlattenS Offline
                SPlattenS Offline
                SPlatten
                wrote on last edited by
                #7

                @hskoglund , thank you, I will give it a go.

                Kind Regards,
                Sy

                1 Reply Last reply
                0
                • hskoglundH hskoglund

                  Hmm, if you're anyway off into setStyleSheet() land, if the only thing keeping you from using a QSlider is the proportional stuff, then you could try applying setStyleSheet() on QSlider instead, say:

                  mpSlider->setStyleSheet(QString(
                          ".QSlider::groove { background: transparent; height: %1px; } "
                          ".QSlider::handle { height: %2px;}").arg(scrollbarHeight).arg(thumbHeight));
                  

                  you'll have to calculate the thumbHeight (i.e. the movable part of the slider) from the proportion of the image compared to the view, but this approach might be more fruitful :-)

                  SPlattenS Offline
                  SPlattenS Offline
                  SPlatten
                  wrote on last edited by SPlatten
                  #8

                  @hskoglund , one thing that comes to mind....the slider value is normally at the center point of the handle? Can this be offset? If the handle is adjusted to show a proportional representation then the value would have to be at the very top of the handle.

                  Kind Regards,
                  Sy

                  1 Reply Last reply
                  0
                  • hskoglundH hskoglund

                    Hmm, if you're anyway off into setStyleSheet() land, if the only thing keeping you from using a QSlider is the proportional stuff, then you could try applying setStyleSheet() on QSlider instead, say:

                    mpSlider->setStyleSheet(QString(
                            ".QSlider::groove { background: transparent; height: %1px; } "
                            ".QSlider::handle { height: %2px;}").arg(scrollbarHeight).arg(thumbHeight));
                    

                    you'll have to calculate the thumbHeight (i.e. the movable part of the slider) from the proportion of the image compared to the view, but this approach might be more fruitful :-)

                    SPlattenS Offline
                    SPlattenS Offline
                    SPlatten
                    wrote on last edited by
                    #9

                    @hskoglund , I'm not sure this is going to work, for starters using the StyleSheet to set the handle width and height doesn't seem to work and there is the other issue where the origin / value seems to be central to the orientation of the handle.

                    Kind Regards,
                    Sy

                    1 Reply Last reply
                    0
                    • hskoglundH Offline
                      hskoglundH Offline
                      hskoglund
                      wrote on last edited by hskoglund
                      #10

                      Hi, dug up some old code that assumes you have a vertical QSlider with a height of say 400 pixels, minimum = 0, maximum = 400, singleStep = 1 and pageStep = 25:

                      mpSlider->setStyleSheet(
                          "QSlider::groove { background: transparent; width: 4px; } "
                          "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                      

                      then moving the slider will give you values between 0 and 400 :-)

                      Edit:
                      here's the simplified test program, create a vanilla QWidget app, in mainwindow.cpp and #include "qslider.h" and insert this code in MainWindow::MainWindow() after ui->setupUi(this):

                      auto mpSlider = new QSlider(Qt::Vertical,this);
                      mpSlider->setGeometry(QRect(100,100,100,400));
                      mpSlider->setRange(0,400);
                      mpSlider->setStyleSheet(
                      "QSlider::groove { background: transparent; width: 4px; } "
                      "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                      connect(mpSlider,&QSlider::valueChanged,[this](int value) { setWindowTitle("Slider value: " + QString::number(value));});
                      

                      should give you this:
                      Screenshot 2021-06-21 at 11.41.07.png

                      SPlattenS 2 Replies Last reply
                      3
                      • hskoglundH hskoglund

                        Hi, dug up some old code that assumes you have a vertical QSlider with a height of say 400 pixels, minimum = 0, maximum = 400, singleStep = 1 and pageStep = 25:

                        mpSlider->setStyleSheet(
                            "QSlider::groove { background: transparent; width: 4px; } "
                            "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                        

                        then moving the slider will give you values between 0 and 400 :-)

                        Edit:
                        here's the simplified test program, create a vanilla QWidget app, in mainwindow.cpp and #include "qslider.h" and insert this code in MainWindow::MainWindow() after ui->setupUi(this):

                        auto mpSlider = new QSlider(Qt::Vertical,this);
                        mpSlider->setGeometry(QRect(100,100,100,400));
                        mpSlider->setRange(0,400);
                        mpSlider->setStyleSheet(
                        "QSlider::groove { background: transparent; width: 4px; } "
                        "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                        connect(mpSlider,&QSlider::valueChanged,[this](int value) { setWindowTitle("Slider value: " + QString::number(value));});
                        

                        should give you this:
                        Screenshot 2021-06-21 at 11.41.07.png

                        SPlattenS Offline
                        SPlattenS Offline
                        SPlatten
                        wrote on last edited by
                        #11

                        @hskoglund, thank you, where on the slider is the value indicated?

                        Kind Regards,
                        Sy

                        mrjjM 1 Reply Last reply
                        0
                        • SPlattenS SPlatten

                          @hskoglund, thank you, where on the slider is the value indicated?

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

                          @SPlatten

                          QSlider don't show the current value as far as i know.

                          there is a handy subclass here to get text the handle.
                          https://stackoverflow.com/questions/18383885/qslider-show-min-max-and-current-value

                          Also do note that a 4 pixel slider will drive people nuts on a hi res screen.

                          SPlattenS 1 Reply Last reply
                          1
                          • mrjjM mrjj

                            @SPlatten

                            QSlider don't show the current value as far as i know.

                            there is a handy subclass here to get text the handle.
                            https://stackoverflow.com/questions/18383885/qslider-show-min-max-and-current-value

                            Also do note that a 4 pixel slider will drive people nuts on a hi res screen.

                            SPlattenS Offline
                            SPlattenS Offline
                            SPlatten
                            wrote on last edited by
                            #13

                            @mrjj , the application itself is being written for a specific target in mind, its for training software.

                            Kind Regards,
                            Sy

                            mrjjM 1 Reply Last reply
                            0
                            • SPlattenS SPlatten

                              @mrjj , the application itself is being written for a specific target in mind, its for training software.

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

                              @SPlatten

                              Hi
                              Ok. Well so its purpose with such a tiny scrollbar.
                              I guess that makes better sense then.

                              SPlattenS 1 Reply Last reply
                              0
                              • mrjjM mrjj

                                @SPlatten

                                Hi
                                Ok. Well so its purpose with such a tiny scrollbar.
                                I guess that makes better sense then.

                                SPlattenS Offline
                                SPlattenS Offline
                                SPlatten
                                wrote on last edited by
                                #15

                                @mrjj , its not really my decision, I'm working to a specification which includes mock images.

                                Kind Regards,
                                Sy

                                1 Reply Last reply
                                0
                                • hskoglundH hskoglund

                                  Hi, dug up some old code that assumes you have a vertical QSlider with a height of say 400 pixels, minimum = 0, maximum = 400, singleStep = 1 and pageStep = 25:

                                  mpSlider->setStyleSheet(
                                      "QSlider::groove { background: transparent; width: 4px; } "
                                      "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                                  

                                  then moving the slider will give you values between 0 and 400 :-)

                                  Edit:
                                  here's the simplified test program, create a vanilla QWidget app, in mainwindow.cpp and #include "qslider.h" and insert this code in MainWindow::MainWindow() after ui->setupUi(this):

                                  auto mpSlider = new QSlider(Qt::Vertical,this);
                                  mpSlider->setGeometry(QRect(100,100,100,400));
                                  mpSlider->setRange(0,400);
                                  mpSlider->setStyleSheet(
                                  "QSlider::groove { background: transparent; width: 4px; } "
                                  "QSlider::handle { background: blue; border-radius: 5px; border: 1px solid gray; height:200px;}");
                                  connect(mpSlider,&QSlider::valueChanged,[this](int value) { setWindowTitle("Slider value: " + QString::number(value));});
                                  

                                  should give you this:
                                  Screenshot 2021-06-21 at 11.41.07.png

                                  SPlattenS Offline
                                  SPlattenS Offline
                                  SPlatten
                                  wrote on last edited by SPlatten
                                  #16

                                  @hskoglund , sorry for the delay, been busy with other stuff.

                                      QRect rctGeom(rect());
                                      int intHeight(rctGeom.height()),
                                      //Using the maximum and minimum actual values calculate percentage visible
                                          intSpan(truth::msintMaximum - truth::msintMinimum);
                                      double dblPercent = (double)intHeight / (double)intSpan,
                                      //Now work out how much of the scale the percentage into the visible area
                                             dblVisible = dblPercent * intHeight;
                                      QString strStyle(QString("QSlider::handle {"
                                                               "background:blue;"
                                                               "border-radius: 0px;"
                                                               "border: 1px solid gray;"
                                                               "height: %1px;}").arg((int)dblVisible));
                                      truth::mspSlider->setStyleSheet(strStyle);
                                  

                                  intHeight contains 486
                                  intSpan contains 2000
                                  dblPercent contains 0.243
                                  dblVisible contains 118.098
                                  strStyle contains:

                                  QSlider::handle {background:blue;border-radius: 0px;border: 1px solid gray;height: 118px;}
                                  

                                  However what I'm seeing on the screen is:
                                  5a65b6d2-c6f8-40d4-ac99-3b95d0f4a745-image.png
                                  So clearly the handle is not 118 px, what haven't I done?

                                  Kind Regards,
                                  Sy

                                  1 Reply Last reply
                                  0
                                  • hskoglundH Offline
                                    hskoglundH Offline
                                    hskoglund
                                    wrote on last edited by
                                    #17

                                    Hi, I also stumbled on this (QSlider refusing to cooperate). What's odd here is to make that height of 118px work, you also have to mess with QSlider's groove in your setStyleShee() call. And the easiest way was to make it invisible, like this:

                                    QString strStyle(QString(
                                    "QSlider::groove { background: transparent; } "
                                    "QSlider::handle {"
                                    "background:blue;"
                                    "border-radius: 0px;"
                                    "border: 1px solid gray;"
                                    "height: %1px;}").arg((int)dblVisible));
                                    

                                    Ok problem solved, but now you got another problem: no groove.
                                    If you need one, you can draw your own, I used a QFrame say like this:

                                    auto pFrame = new QFrame(mpSlider->parentWidget());
                                    pFrame->setGeometry(mpSlider->geometry());
                                    pFrame->setFrameStyle(QFrame::VLine | QFrame::Sunken);
                                    pFrame->stackUnder(mpSlider);   // z-order (important!)
                                    

                                    note: maybe some more settings are needed on that QFrame for grey color etc. to make it look more like a QSlider's groove :-)

                                    SPlattenS 1 Reply Last reply
                                    4
                                    • hskoglundH hskoglund

                                      Hi, I also stumbled on this (QSlider refusing to cooperate). What's odd here is to make that height of 118px work, you also have to mess with QSlider's groove in your setStyleShee() call. And the easiest way was to make it invisible, like this:

                                      QString strStyle(QString(
                                      "QSlider::groove { background: transparent; } "
                                      "QSlider::handle {"
                                      "background:blue;"
                                      "border-radius: 0px;"
                                      "border: 1px solid gray;"
                                      "height: %1px;}").arg((int)dblVisible));
                                      

                                      Ok problem solved, but now you got another problem: no groove.
                                      If you need one, you can draw your own, I used a QFrame say like this:

                                      auto pFrame = new QFrame(mpSlider->parentWidget());
                                      pFrame->setGeometry(mpSlider->geometry());
                                      pFrame->setFrameStyle(QFrame::VLine | QFrame::Sunken);
                                      pFrame->stackUnder(mpSlider);   // z-order (important!)
                                      

                                      note: maybe some more settings are needed on that QFrame for grey color etc. to make it look more like a QSlider's groove :-)

                                      SPlattenS Offline
                                      SPlattenS Offline
                                      SPlatten
                                      wrote on last edited by
                                      #18

                                      @hskoglund , thank you, that works.

                                      Kind Regards,
                                      Sy

                                      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