Style the scrollbar of QListView

[sNiff3ls]

Hi,

is it possible to style the scrollbars of a QListView?
I'm sure it's possible, but i cant find out how.

Can someone show me how i have to write the stylesheet definition for this purpose?

Best regards

[Guest]

try something like this ...

@
myListView->setStyleSheet(QString("QScrollBar:horizontal { border: 2px solid grey; background: #32CC99; height: 15px; margin: 0px 20px 0 20px; }"));
@

[sNiff3ls]

oh damn... made a lapse mistake:

I've already tryed a similar stylesheet ... now if i saw your solution i recognized that my scrollbar is vertical not horizontal.

Thanks a lot now it works.

[Guest]

ok cool :)

[sNiff3ls]

Ok next problem:

Stylesheet:
@QScrollBar:vertical {
border: none;
background: rgba(0,0,0,0);
width: 40px;
margin: 20px 0px 20px 0px;
}
QScrollBar::handle:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgba(183, 210, 192, 255), stop: 0.5 rgba(105, 165, 5, 255), stop:1 rgba(203, 225, 0, 255));
min-height: 20px;
}
QScrollBar::add-line:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgba(183, 210, 192, 255), stop: 0.5 rgba(105, 165, 5, 255), stop:1 rgba(203, 225, 0, 255));
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgba(183, 210, 192, 255), stop: 0.5 rgba(105, 165, 5, 255), stop:1 rgba(203, 225, 0, 255));
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}@

If i use this stylesheet the background of the QScrollBar is "white-dottet" (see screenshot).
!http://img541.imageshack.us/img541/25/scrollbarx.png(screenshot)!
But i expect that it's transparent because of the following line in the stylesheet:
@background: rgba(0,0,0,0);@
shouldn't it?

[Guest]

Yes regardless of whatever color you use, you will see that pattern. My first guess would be that is how the scroll bar background is drawn (using a brush pattern ). You could probably try to extend the class and have a custom paint .. have to dig into the Qt sources to check this further.

Meanwhile, nice UI .. I like the color combination and design :)

[Stefan Monov]

Hi sNiff3ls.

We had the stippled-scrollbar problem in our app too. Solved it with:

myWindow->setStyle(new QPlastiqueStyle())

Since we're using CSS to customize the entire look of the app (just like you), making your app use QPlastiqueStyle doesn't affect anything other than the scrollbar stippling (and a few other minor details). If you weren't using CSS, then QPlastiqueStyle would make your app look totally different, but in this case I recommend you just use it as a hack, because QPlastiqueStyle's scrollbar-drawing implementation doesn't use stippling, whereas the default style on windows (QWindowsStyle) does.

I consider it a bug in Qt that this is necessary. QScrollBar should be fixed to respect the css fully.

[Guest]

thanks Stefan for this info

[sNiff3ls]

Thanks, works fine.

[Guest]

sNiff3ls, just a suggestion, its better to post new problems in a separate new thread,easier to search later :)

[sNiff3ls]

That's right, the next time i'll mind it.

[hcfalan]

so simple, good!

[jkkj]

for qt

@Stefan-Monov said in Style the scrollbar of QListView:

Hi sNiff3ls.

We had the stippled-scrollbar problem in our app too. Solved it with:

myWindow->setStyle(new QPlastiqueStyle())

Since we're using CSS to customize the entire look of the app (just like you), making your app use QPlastiqueStyle doesn't affect anything other than the scrollbar stippling (and a few other minor details). If you weren't using CSS, then QPlastiqueStyle would make your app look totally different, but in this case I recommend you just use it as a hack, because QPlastiqueStyle's scrollbar-drawing implementation doesn't use stippling, whereas the default style on windows (QWindowsStyle) does.

I consider it a bug in Qt that this is necessary. QScrollBar should be fixed to respect the css fully.

2019 now, in python 3 and pyqt5, use following code:

# keys = QStyleFactory.keys()
self.setStyle(QStyleFactory.create('Fusion'))

refer link here:
https://doc.qt.io/qt-5/sourcebreaks.html#changes-to-qstyle
https://doc.qt.io/qt-5/qstylefactory.html#create