Qt CSS - Small white space on bottom of QScrollBar



  • Greetings everyone,

    I have a minor aesthetic problem with Qt at this moment. I am currently customizing the look of the QScrollBars in my application and have noticed a graphical oddity. Lacking a decent way of describing it, searches have lead me nowhere and I've attempted numerous stylesheet related fixes. I will post an enlarged screencap below.

    http://postimg.org/image/o3gl78gf1/

    The red box on the bottom indicates the white space I am talking about. It is located just under the downward arrow (which I colored that horrible magenta for clarity's sake).

    Any suggestions on what may be causing this and/or how to fix it? It is easier to spot than one might think because it cuts off the border of the QScrollArea.

    I will post any relevant CSS code below as well:

    @QScrollBar:vertical {
    background-color: $orval-light-gray4$;
    width: 20px;
    border-style: none;
    margin: 20px 0 20px 0;
    padding: 0px;
    }

    QScrollBar::handle:vertical {
    background-color: $orval-light-gray2$;
    width: 20px;
    min-height: 10px;
    border-style: none;
    }

    QScrollBar::handle:vertical:pressed {
    /background-color: $orval-medium-gray3$;/
    background-color: $orval-yellow$;
    }

    QScrollBar::add-line:vertical {
    background-color: #FF00FF;/$orval-light-gray4$;/
    width: 20px;
    height: 20px;
    border-style: none;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    }

    QScrollBar::add-line:vertical:pressed {
    background-color: $orval-yellow$;
    }

    QScrollBar::sub-line:vertical {
    background-color: $orval-light-gray4$;
    width: 20px;
    height: 20px;
    border-style: none;
    subcontrol-position: top;
    subcontrol-origin: margin;
    }

    QScrollBar::sub-line:vertical:pressed {
    background-color: $orval-yellow$;
    }

    QScrollBar::up-arrow:vertical {
    border-image: url(:/Orval/Resources/arrowup.png);
    width: 20px;
    height: 20px;
    }

    QScrollBar::down-arrow:vertical {
    border-image: url(:/Orval/Resources/arrowdown.png);
    width: 20px;
    height: 20px;
    }

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

    QDialog#coreTermsAndConditionsDialog QScrollArea {
    border-style: solid;
    border-color: $orval-medium-gray3$;
    border-width: 1px;
    padding-left: 2px;
    padding-bottom: 2px;
    }@

    Thank you in advance for any and all help.



  • Got exactly the same problem, it's freaking me out!

    Doesn't anybody have an idea?



  • Hello,
    I know it's quite old post but might be usefull for someone in the future,
    also that's my first post so hello everyone : )

    You need to define stylesheet for both scrollbars, even when you don't use horizontal scrollbar.
    Then border will be completed for vertical scrollbar at the bottom.



  • Hello,
    I know it's quite old post but might be usefull for someone in the future,
    also that's my first post so hello everyone : )

    You need to define stylesheet for both scrollbars, even when you don't use horizontal scrollbar.
    Then border will be completed for vertical scrollbar at the bottom.



  • This is pretty old but in case anyone is still looking for the answer, it's the QAbstractScrollArea::corner you're looking for. Add this to your style sheet and the area under the scrollbar's add-line control will disappear:

    QAbstractScrollArea::corner {
        background: none;
        border: none;
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.