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

? Offline

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.

? Offline

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?

? Offline

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.

? Offline

thanks Stefan for this info

sNiff3ls

Thanks, works fine.

? Offline

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