View Full Version : QScrollBar CSS Customization Help Needed - Need small scrollbar, large handle

17th December 2010, 18:08
Hello, I am trying to customize a QScrollBar to be a particular height (75px) and have the handle be that height, but squish the groove down to 15px.
I have achieved the squish by adding margins, and then a -30px margin to the handle displays properly, but the only portion of the handle that is click-able is within the 15px section where the groove is located.

I have also tried the following code, figuring the a border of "solid transparent" would make the scrollbar look smaller, but not actually make the handle smaller.

The top picture is what I get, the bottom picture is what I want. The icon has been over-drawn to "protect" the IP of my company (they are anal about posting images, but not code).

Has anyone already encountered a solution to this? I have scoured the internet for the last 2 days on this "style" request that our marketing department has.

Here is the CSS.

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;

QScrollBar::sub-line:horizontal, QScrollBar::add-line:horizontal {
background: none;

QScrollBar::handle:horizontal {
min-height: 75px;
min-width: 125px;

QScrollBar:horizontal {
border: 30px solid transparent;
border-radius: 30px;
background: QLinearGradient(x1:0, y1:0, x2:1, y2:0, stop:0 rgba(0, 0, 0,255), stop:1 rgba(255, 255, 255,255));