Qt CSS - Small white space on bottom of QScrollBar

RenegadeVile

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.

PaSt

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

Doesn't anybody have an idea?

must40

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.

must40

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.

muffins

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