QScrollBar styling difference OSX vs Linux

[AlexanderB]

Hi all,

Using stylesheets, I created a custom style for a scrollbar. On OSX it looks/works the way I want, but on Linux it does not.

Can anyone point me to the mistake I made in this one?

The idea is to have a small handle on the side, and the sub/add line buttons to the left of the handle, and use the full height for these 2 buttons. So in the screenshots, yellow is "sub-line" a red "add-line".

The actual application also has icons on the add/sub line buttons, but those are missing in the test.

To test this I created an empty/new project, added a ScrollArea to it, and applied a stylesheet to the application.

What it should look like (colors are used to be able to see the different area's:

What it looks like on Linux:

I use the following stylesheet:

QWidget {
  background-color: black;
  font-family: Open Sans;
  color: white;
  }

QScrollBar:vertical {
    width: 60px;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    margin-right: 6px;
    margin-left: 52px;
}

QScrollBar::handle:vertical {
    background: #f5a623;
    margin-right: 3px;
    margin-left: 49px;
    min-height: 20px;
}

QScrollBar::sub-line:vertical {
    width: 49px;
    height: 118px;    /* I use a fixed height here since the final application will run fullscreen on an (fixed size) embedded device) */
    margin-right: 11px;
    background: yellow;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::add-line:vertical {
    width: 49px;
    height: 118px;
    margin-right: 11px;
    background: red;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical {
    image: url(:/images/icons/arrow-up.png);
    subcontrol-position: top;
    margin-top: 15px;
}

QScrollBar::down-arrow:vertical {
    image: url(:/images/icons/arrow-down.png);
    subcontrol-position: bottom;
    margin-bottom: 15px;
}

[SGaist]

Hi,

What version of Qt are you using ?
What Linux distribution is that ?
What desktop environment are you using ?
Is it the same on both OS ?

[AlexanderB]

Hi,

One machine is a Fedora setup, not entirely sure what version of QT, but the (actual target) embedded device uses a Buildroot build (busybox) without a desktop, QT 5.11 is used on that setup. The machine on which it looks the way I want, is an MacOs Mojave system. On that setup I used both QT 5.11 and 5.12, with the same (correct) result.

[SGaist]

Something is not clear then:

• Do you have that wrong result on your Fedora machine
• Your embedded target ?
• Both ?

Are you using custom Qt versions on both Linux devices ?

[AlexanderB]

Hi,

On both the embedded as Fedora target the result is clear. I've got the feeling that it has to do with some difference between osx en Linux. Since on osx it looks good, but on both Linux targets not.

Afaik there are no custom version being used. The installation on Fedora is a plain QT installation. On the embedded device is a build from Buildroot. But as far as I can see, there are no specific changes..

[AlexanderB]

Hi all,

It has been a while since I opened this topic. In the meantime I tried some more things, and now also used a recent fedora setup with QT 5.12 installed on it (the fedora setup I used before was quite old).
On this setup I do see the exact same behaviour. The scroll buttons are placed on top of each other, as can be seen in the screenshot I posted before.

So ignoring the embedded target for now, I have the following setups:

• Fedora 30 with QT 5.12 -> Results are not as expected
• MacOS with QT 5.12 -> Results are as expected

Is there anyone who can help me with figuring this out? My QT and especially styling knowledge is quite limited..

[SGaist]

What desktop environment are you using on your Fedora machine ?

[AlexanderB]

I am using Gnome Classic.

On the embedded device I do not have a desktop, and solely use QT (with EGLFS).