Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QScrollBar can't be styled anymore?



  • 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?


  • Moderators

    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;
    }
    

  • Moderators

    @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


  • Moderators

    @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).



  • 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...



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


  • Lifetime Qt Champion

    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.



  • @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.


  • Lifetime Qt Champion

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



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


  • Lifetime Qt Champion

    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?



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


  • Lifetime Qt Champion

    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



  • 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...?


  • Lifetime Qt Champion

    @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.



  • @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?



  • 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...


  • Lifetime Qt Champion

    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.


Log in to reply