PySide - Problem styling a QTabWidget

Last Update: 18.01.2015. By azarai in python | pyside

I am currently writing an eBook Writer desktop app and i am using python 3 and PySide. It is the first time i am actually using QT and PySide. Some hings go really easy, some not so and sometimes i encounter strange behaviour. This article covers one of those.

What i wanted

I have a QDialog with a QTabWidget and some input boxes inside. The whole thing is styled via QT stylesheets. The first tab is called tabPane. For illustration purpose i use extreme colors :-)

What it looks like:

QDialog {
    background-color: green;
}

#tabPane {
    background-color: blue;
    border : 10px solid yellow;
}

QTabWidget::pane {
    margin-left: 0px;
    padding-left:0px;
}

QTabBar::tab {
    padding: 10px;
    background: #FEFEF4;
}

QTabBar::tab:selected {
    background: #F5f5f5;
}


QComboBox {
     background-color: #FEFEF9;
     padding:1px 1px 1px 5px;
}

QComboBox QListView {
    background-color: red;
    alternate-background-color: gray;
    border-style: none;
    padding :0px;
}

QComboBox QListView::item {
    background-color: yellow;
    padding : 2px;
}

Looks great so far in QT designer and everything works as expected.

I did compile the ui design file with pyside-uic to python. And made it runnable for this test. To reduce the clutter, i show only the relevant parts. The whole file can be downloaded under qtabwidget_test.py

    self.tabWidget = QtGui.QTabWidget(Dialog)
    self.tabWidget.setObjectName("tabWidget")
    self.tabPane = QtGui.QWidget()
    self.tabPane.setObjectName("tabPane")

When you start it, it will look like this:

Yep, the background color of the tabPane is gone and replaced by something else. Strange. Googling didnt’ help for me. I found some info, that when you start changing backgrounds on one wiget you need to take care of the styling of subwidgets. At least when using QT stylesheets. But no solution or workaround for my problem. Thats when i read in the qt docs

::pane The pane (frame) of a QTabWidget.

Hmm i thought, lets try it with a QFrame as the tabPane widget. And voila

it worked. And i got my workaround. Hopefully it helps others too.