How can I flush QScrollBars with their containing QFrames/QWidgets via. QSS?

Ewan Green

I have a stylesheet with custom styled QScrollBars. The QSS is as follows (I am aware it's messy):

QScrollBar, QScrollBar::add-line, QScrollBar::sub-line
{
    background-color: @button-background;
    border: 1px solid @button-border;
}
QScrollBar:horizontal
{
    padding-left: 13px;
    padding-right: 13px;
}
QScrollBar:vertical
{
    padding-top: 13px;
    padding-bottom: 13px;
}
QScrollBar::add-line:hover, QScrollBar::sub-line:hover
{
    background-color: @button-highlight;
}
QScrollBar::add-line:pressed, QScrollBar::sub-line:pressed
{
    background-color: @button-down;
}
QScrollBar
{
    border-radius: 6px;
}
QScrollBar::left-arrow
{
    image: url(images/left_arrow.png);
}
QScrollBar::right-arrow
{
    image: url(images/right_arrow.png);
}
QScrollBar::up-arrow
{
    image: url(images/up_arrow.png);
}
QScrollBar::down-arrow
{
    image: url(images/down_arrow.png);
}

QScrollBar::add-line:vertical
{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0px;
}
QScrollBar::sub-line:vertical
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 0px;
}
QScrollBar::add-line:horizontal
{
    border-top-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 6px;
    border-left: 0px;
}
QScrollBar::sub-line:horizontal
{
    border-top-left-radius: 6px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
}

QScrollBar::handle
{
    border: 0px solid;
    border-radius: 3px;
    width: 8px;
    margin: 2px;
    background-color: @button-down;
}
QScrollBar::handle:vertical
{
    min-height: 10px;
}
QScrollBar::handle:horizontal
{
    min-width: 10px;
}
QScrollBar::handle:hover
{
    background-color: @button-border;
}

QScrollArea:

QGroupBox, QScrollArea
{
    border: 1px solid @button-border;
    border-radius: 6px;
    background-color: rgba(0,0,0,8);
}

While the color shouldn't have anything to do with it, the @button-border, @button-highlight, etc. are custom implemented variables.

When I create a QScrollArea, the scroll bars look like this:

I would like for the scroll bars' bottom & right borders to match with the scroll area's borders (i.e. flush).

I have tried setting the padding of the QScrollArea to a negative value (-1px). This partially worked, but then the borders of the scroll area itself were no longer present.
Example:

I have tried setting the margin of the QScrollBars whose parents are QScrollAreas to a negative value (-1px). This screwed up the scroll bar in many ways.
Example:

It does not set the subcontrols padding properly.
It removes the border on the QScrollBar.
It does not extend the width/height of the bars properly, so the 1px issue is still in place on the top & left.
I believe the first 2 issues are that it isn't applying recursively to the QScrollBar, so I would have to set the property for all the subcontrols and fix the border issue. I feel like there is a better way.

Every other fix ends with undesirable effects. The Qt Style Sheets Reference and Qt Style Sheets Examples pages say nothing about the QScrollArea.
This might be easily solved with CSS's inner padding & margin, but from what I can tell there is no such thing in the QSS engine.

Also, I would also like to set the border color of the black square thing in the bottom right corner to transparent, and for the border-radius to work properly and not clip at the top-left corner.
Mockup of desired effect:

ChrisW67

@Ewan-Green said in How can I flush QScrollBars with their containing QFrames/QWidgets via. QSS?:

I would like for the scroll bars' bottom & right borders to match with the scroll area's borders (i.e. flush).

At first read it looked to me like you are asking for:

the horizontal scrollbar to extend rightwards into the small corner box outlined in black, and
the vertical scrollbar to downwards into the small corner box outlined in black

Which bent my mind :)

Back to the request...
I think you want to reduce the QScrollBar right (or bottom) margin, not padding, to zero pixels.
You may also need to reduce the QScrollArea right (or bottom) padding to zero pixels.
That should put the two border lines immediately next to each other (it's possible that's already the case). You might also tinker with negative one margins on the scroll bars.

Ewan Green

Though I appreciate your suggestion -- they are both already at 0, as you can see here:

This is me redeclaring margin & padding for the scroll elements so I don't have to pick through the sea of QSS I've written to find where they're initially set :)

What I want is not for the horizontal or vertical scroll bars to occupy the black square, just for the black square to not be visible. I think you picked up on that by the end of my first post, though. I can definitely see why you think that :p

Edit: THIS IS STUPID: DONT DO THIS
As for negative values, I already toyed around with those -- the third screenshot in my initial post was just setting padding: -1px; on the QScrollBars that are children of a QScrollArea. Fleshing out a bit more the way I'd imagine would fix it just does this:

Yeah, it fixes the border issue, but creates a plethora of other ones. The sub-line and add-line subcontrols seem to take over the whole horizontal/vertical space, and I cannot access the handle (that also happens to be oversized).
DO THIS INSTEAD:

QScrollArea QScrollBar::horizontal
{
    margin: -1px;
    margin-top: 1px;
}
QScrollArea QScrollBar::vertical
{
    margin: -1px;
    margin-left: 1px;
}

As long as your subcontrol positions & sizes are set properly, there should not be any setting of margins needed beyond this.

The two border lines are what's already happening without any extra QSS, that's what my first screenshot was. Thank you for your suggestions!

Edit: I forgot about the fact that I had already set margins for the scroll bars. Making the margins negative does not break anything. It does work, but I would like to know if there is a better way than manually setting margins of specific widgets' children before I close this topic as solved. Also I can't get rid of this box...