Stylesheet problem with transparent background

Gazi

Hello,

I have noticed smth strange happening when setting the background color to transparent for widgets that are on top of each other. Here is a minimalist example of the QMainWindow 'home', which has a 'main_tabs' QTabWidget.

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QSplitter, QTabWidget
from PySide6.QtGui import QPainter, QColor
from PySide6.QtCore import Qt

home_stylesheet = '''
        QWidget {background-color: red; color: green;}
        '''
main_tabs_stylesheet = '''
        QWidget {background-color: transparent; border: none;}
        QTabWidget {background-color: transparent; border: none;}
        QTabBar {background-color: transparent; border: none;}
        '''
        
# main_tabs widget
class main_tabs(QTabWidget):
    def __init__(self, parent = None):
        super().__init__(parent)
        self.setStyleSheet(main_tabs_stylesheet)
        self.setContentsMargins(0, 0, 0, 0)


# home widget
class home(QMainWindow):
    def __init__(self):
        super().__init__()
        self.showMaximized()
        self.init_ui()
        self.setStyleSheet(home_stylesheet)
        
    def init_ui(self):        
        splitter = QSplitter(parent = self)
        splitter.setHandleWidth(0)
        self.setCentralWidget(splitter)
        
        # Create a main tabs on the right
        self.tab_widget = main_tabs(parent = splitter)
        
        # Set stretch factors to ensure the drawer widget takes minimum space
        splitter.setStretchFactor(0, 1)  
            

if not QApplication.instance():
    app = QApplication(sys.argv)
else:
    app = QApplication.instance()

window = home()    
window.show()
sys.exit(app.exec())

I have set the background of 'home' to red and the background of the 'main_tabs' to transparent. I would expect to see a red rectangle when i start the app. But I see a Black one. I have no clue where the black is coming from.

However, if I remove the first line of the main_tabs_stylesheet, i.e. if the main_tabs_stylesheet looks like that:

main_tabs_stylesheet = '''
        QTabWidget {background-color: transparent; border: none;}
        QTabBar {background-color: transparent; border: none;}
        '''

then the red rectangle of 'home' is shown.

Why does setting the main_tabs QWidget background to transparent make the main_tabs black?

Thank you for any help.

Bests,
Gazi

Tink

The two QWidgets styles are having a conflict. The last one overrides the previous. Transparent gives a strange black result. Change it to blue and it will be blue. Perhaps use #objectName selectors.

Gazi

@Tink
Well, why is there a conflict?

Ronel_qtmaster

@Gazi because of the transparent background

Gazi

@Ronel_qtmaster
Sorry for not understanding, but can you ellaborate a bit on that? The main_tabs should apply a transparent background to any QWidget inside it. Why is it conflicting with anything?

Thx

Ronel_qtmaster

@Gazi QWidget {background-color: transparent; border: none;}
as the tab widget inherit from Qwidget, this line is making all QWidgets transparent, and the main window as well.This is why you see black window.

Tink

@Gazi said in Stylesheet problem with transparent background:

@Tink
Well, why is there a conflict?

I'm not always sure why there are unexpected results from cascading styles, but it helped me to set all the styles from one place eg on the centralwidget. And use #objectName if i have different styles for similar widgets.

Gazi

@Tink
Could you quickly suggest how the code should look like according to your best practice?
Thx

Tink

@Gazi well i think you just need to look at this: https://doc.qt.io/qt-6/stylesheet-examples.html#style-sheet-usage

Although in the documentation they suggest setting stylesheets on many widgets, but it might be hard to keep track of what influences what, Especially if you don't use an an ID Selector. And what if you need to make changes later...

Gazi

@Tink
I am trying different ways to use selectors or dynamic properties, but this whole stylesheet thing looks really really not stable. There are some very strange behaviors.

Is there any other way to style the widgets?

Thx

Ronel_qtmaster

@Gazi i already gave you the reason why you faced black widget.Check my answer above

Gazi

@Ronel_qtmaster

Well, i tried to give selectors for the 'home' and for the 'main_tabs'. The same issue holds.

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QSplitter, QTabWidget
from PySide6.QtGui import QPainter, QColor
from PySide6.QtCore import Qt

home_stylesheet = '''
        QWidget#home {background-color: red; color: green;}
        '''
main_tabs_stylesheet = '''
        QWidget#main_tabs {background-color: transparent; border: none;}
        QTabWidget#main_tabs {background-color: transparent; border: none;}
        QTabBar#main_tabs {background-color: transparent; border: none;}
        '''
        
# main_tabs widget
class main_tabs(QTabWidget):
    def __init__(self, parent = None):
        super().__init__(parent)
        self.setStyleSheet(main_tabs_stylesheet)
        self.setContentsMargins(0, 0, 0, 0)
        self.setObjectName('main_tabs')


# home widget
class home(QMainWindow):
    def __init__(self):
        super().__init__()
        self.showMaximized()
        self.init_ui()
        self.setStyleSheet(home_stylesheet)
        self.setObjectName('home')

        
    def init_ui(self):        
        splitter = QSplitter(parent = self)
        splitter.setHandleWidth(0)
        self.setCentralWidget(splitter)
        
        # Create a main tabs on the right
        self.tab_widget = main_tabs(parent = splitter)
        
        # Set stretch factors to ensure the drawer widget takes minimum space
        splitter.setStretchFactor(0, 1)  
            

if not QApplication.instance():
    app = QApplication(sys.argv)
else:
    app = QApplication.instance()

window = home()    
window.show()
sys.exit(app.exec())

I believe there is smth else going on here. I think there is some bug.

Ronel_qtmaster

@Gazi no you are doing it wrong.When you are seeting the stylesheet of TabWidget you do not need to add QWidget#main_tabs {background-color: transparent; border: none;} because it is affecting home_stylesheet instead

Gazi

@Ronel_qtmaster
But how to make it affect only main_tabs background?

Gazi

@Gazi said in Stylesheet problem with transparent background:

@Ronel_qtmaster
But how to make it affect only main_tabs background?

Even if i have them like that:

home_stylesheet = '''
        QWidget#home {background-color: green; color: green;}
        '''
main_tabs_stylesheet = '''
        QTabWidget#main_tabs {background-color: transparent; border: none;}
        '''

I still see a black background instead of a green one.

Tink

@Gazi i saw a post mentioning you have to set DocumentMode to true. This works for me.

ui->tabWidget->setDocumentMode(true);

QSplitter {background-color: red}
QTabWidget {background: transparent}

Gazi

@Tink
The documentMode seems to solve quite some issues. So, thanks a lot.

However, i believe there is still a bug somewhere related to the transparent backgrounds.

Thanks.