QScrollBar vertical scrollbar set width
-
wrote on 21 Jun 2021, 02:54 last edited by
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.
-
wrote on 21 Jun 2021, 03:51 last edited by
Hi, try:
pScrollBar->setStyleSheet("QScrollBar:vertical { width: 4px; }");
note: using setStyleSheet can shortcircuit other custom settings you apply on the scrollbar
-
Hi, try:
pScrollBar->setStyleSheet("QScrollBar:vertical { width: 4px; }");
note: using setStyleSheet can shortcircuit other custom settings you apply on the scrollbar
wrote on 21 Jun 2021, 03:59 last edited by@hskoglund , excellent, that worked!, now is there anyway to hide the up and down buttons as they are now quite wrong and not required ?
-
wrote on 21 Jun 2021, 04:13 last edited by
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
-
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
wrote on 21 Jun 2021, 04:40 last edited by SPlatten@hskoglund , tried that, didn't work, also found this:
https://stackoverflow.com/questions/49890692/how-to-remove-qscrollbar-scroll-buttonsTried 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-qscrollbarNone 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.
-
wrote on 21 Jun 2021, 06:40 last edited by
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 :-)
-
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 :-)
wrote on 21 Jun 2021, 06:47 last edited by@hskoglund , thank you, I will give it a go.
-
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 :-)
wrote on 21 Jun 2021, 08:24 last edited by SPlatten@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.
-
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 :-)
wrote on 21 Jun 2021, 08:41 last edited by@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.
-
wrote on 21 Jun 2021, 09:20 last edited by 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));});
-
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:
wrote on 21 Jun 2021, 09:39 last edited by@hskoglund, thank you, where on the slider is the value indicated?
-
@hskoglund, thank you, where on the slider is the value indicated?
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-valueAlso do note that a 4 pixel slider will drive people nuts on a hi res screen.
-
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-valueAlso do note that a 4 pixel slider will drive people nuts on a hi res screen.
-
@mrjj , the application itself is being written for a specific target in mind, its for training software.
Hi
Ok. Well so its purpose with such a tiny scrollbar.
I guess that makes better sense then. -
Hi
Ok. Well so its purpose with such a tiny scrollbar.
I guess that makes better sense then. -
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:
wrote on 22 Jun 2021, 13:04 last edited by SPlatten@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:
So clearly the handle is not 118 px, what haven't I done? -
wrote on 22 Jun 2021, 22:09 last edited by
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 :-)
-
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 :-)
wrote on 23 Jun 2021, 05:52 last edited by@hskoglund , thank you, that works.
1/18