QToolBar - setting icon size based on available screen geometry results in a graphical glitch

Red Baron

Hi!

I have already posted this on Stackoverflow but it seems that the topic might be more appropriate here. Here is a link to the original post. The code is in PyQt4.

I have a toolbar with a bunch of buttons (custom QToolButtons). Each button has the following configuration:

Stylesheet:

style = 'QPushButton:hover{border: 4px solid transparent;} QPushButton{margin: 3px; border-radius: 4px; image: url(' + \
            self.icon + ') 0 0 0 0 stretch stretch; background: none;}'

where self.icon is an SVG. The style changes based on how the button is interacted with and what state it is in (custom states along with the typical ones like pressed, focused etc.).

Size policy:

self.setSizePolicy(QSizePolicy.Maximum, QSizePolicy.Maximum)

The toolbar's icon size is set as follows

availableScreenSpace = QApplication.desktop().availableGeometry()
# Extract icon size based on available screen space divided by some constant factor
self.max_icon_size = QSize(availableScreenSpace.width()/25, availableScreenSpace.height()/25)

...

# Supports multiple toolbars!
for ui_component in self.children():
  if type(ui_component) is QToolBar:
    ui_component.setIconSize(self.max_icon_size)

with the toolbar being managed by a QMainWindow with nesting enabled.

Purpose:

I would like to have the application running not only on a desktop but also on a small touch screen connected to a remote computer (both systems run Ubuntu 14.04 LTS). The widgets inside the main window can easily be adjusted to the size of the window however I have noticed that the size of the toolbar is to be handled a little bit differently namely through the icon size (if I want to increase/decrease the height (when the toolbar is horizontal) or width (when the toolbar is vertical)) and if not dealt with it looks rather small.

The problem:

I'm getting some heavy graphical glitches:

Below notice the lines on the left and right side of the toolbar!

It doesn't matter whether the expansion indicator is there or not. Even when all buttons fit on the screen I'm still getting what can be observed in the first screenshot:

Any idea why this is happening and possibly a way to fix it? I have larger and smaller SVGs in my application such as this one:

In the screenshot above each widget in the view (all that is on the right inside a grid layout) are taken care of by the layout they are part of. There are no issues there as you can see.