QScrollBar can't be styled anymore?

Tink

Suddenly my QScrollBars ignore their stylesheets... this happened after upgrading Qt to 5.13.0-1. No matter what i try i can't style them with css anymore. Can someone with the same version check if this is a bug for them as well?

sierdzio

I'm using Qt 5.13 and styles on scroll bars work fine (same as in previous versions). Check console output of your app - does Qt print a message that stylesheet could not be parsed? If so, you have a syntax error.

Here's the code that works on my side, hope it helps:


QScrollBar {
    border: none;
    background: #F8F8F8;
}

QScrollBar::handle {
    background: #CCCCCC;
    min-width: 20px;
    min-height: 20px;
}

QScrollBar::vertical {
    width: 5px;
}

QScrollBar::horizontal {
    height: 5px;
}

QScrollBar::add-line {
    border: none;
    background: none;
}

QScrollBar::sub-line {
    border: none;
    background: none;
}

J.Hilk

@tink
have a similar issue with an android project on 5.13 (and 5.12.4) so far, I'm unable to pinpoint what exactly is parsed incorrectly

sierdzio

@j-hilk said in QScrollBar can't be styled anymore?:

@tink
have a similar issue with an android project on 5.13 (and 5.12.4) so far, I'm unable to pinpoint what exactly is parsed incorrectly

Yeah, unfortunately the warning does not hint at what is wrong at all :-( In a recent case, the offending line was a comment (used // comment instead of /* comment */ out of habit).

Tink

Hi there,

So i try the following css in two situations in designer.

QScrollBar {
border: none;
background-color: rgb(164, 0, 0);
}

QScrollBar::handle {
background-color: rgb(32, 74, 135);
}

First i open a widget template. Drop QTextEdit and set a widget layout. Then copy the css in the QTextEdit stylesheet. That works as expected.

Then i load my existing design and there it doesnt work no matter what i try. Also it doesnt work from within the code. And no css parsing errors. Must be something else going on...

Tink

@j-hilk
How similar? Is the QScrollBar unstyled? Do you get a stylesheet parsing error? Did it work in a previous version?

mrjj

Hi
To check if "Must be something else going on."
I would place a QScrollbar on a from in the real project and
give it a name, then use this name in the stylesheet as selector and
see if it then works.

Tink

@mrjj
Hi, good idea.
So i placed 2 QScrollBars in the project. One uses the objectname as the CSS selector and the other one uses the classname. They both display correctly.

The malfunctioning scrollbars are those that belong to the QTextEdit and QListWidget.

mrjj

Hi
Super.
Ok so its not broken as such.
Do you have stylesheets set on the QTextEdit and QListWidget
directly or via the parent ?

Tink

Directly on the widgets. It used to work alright. And i can't think of anything i changed except upgrading.

mrjj

Hi
Its must somehow be related to those stylesheets.
I will try update to 5.13.0 and see if something happens.

Update:
Nope. Everything still works as expected on win/linux.

What platform are you seeing this on?

Tink

I'm on Arch Linux.
Thanks for trying stuff btw :)

mrjj

Hi
Could you try the style sheet from the docs ?

 QScrollBar:vertical {
     border: 2px solid grey;
     background: #32CC99;
     width: 15px;
     margin: 22px 0 22px 0;
 }
 QScrollBar::handle:vertical {
     background: white;
     min-height: 20px;
 }
 QScrollBar::add-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

Directly on the ListWidget
alt text

Tink

Hey, well the only good result i got was copying the example code onto a parent frame in Designer.
On the widget itself: doesn't work. And from code: doesn't work.
I'm using PyQt btw, perhaps that matters...?

mrjj

@tink
hi
Ok. so stylesheet can work just not on the widget itself.
Im not sure using pyQt matters as its a language binding and
if something was up with newer Qt and the binding, one should think you would get other issues than just stylesheet and scrollbar.
I tried with the 5.13 on my main project using stylesheet heavily
including scrollbars to make them better for touch and all seem
to look and work as normally so im not sure what is going on.
Since a clean project work, i think it must be something locally in your actual project.
I would try to remove any style sheet on parents and only apply on listwidget too see if that then works.
Else it seems the best bet would be to downgrade and wait a bit before trying that verison again.

Tink

@mrjj
I'm trying different things with the css now like putting everything onto a parent. With no success...
Downgrading will probably break dependencies . I guess i will have to wait for a new version and see if that helps.

But now i sometimes see this error (after changing css):
qt.qpa.xcb: QXcbConnection: XCB error: 13 (BadGC), sequence: 492, resource id: 0, major code: 130 (Unknown), minor code: 3
Can that be related to my problem you think?

Tink

Alright... so.. this is weird but the problem is fixed now. I was checking every widget for stylesheets and found a QSplitter with a background color set (on QSplitter only), a couple of levels higher. I had set that bg clr just to have a visual hint in designer. After removing that stylesheet the listwidget and textedit are working fine again.
I don't understand why this is the case. But i'll take it!

If someone can explain what happened, would be awesome.

I have to conclude for now that cascading styles are not very reliable...

mrjj

Hi
Not possible to explain/guess at without the exact stylesheets and locations.

However, its often easier to manage stylesheet
by using ONLY one sheet and set on the application.

That way its easier to control the cascading.
The rules with selectors are pretty complicated and its hard to get an overview
with many stylesheets.