Getting QTabWidget to look more like Maya's native

Coding
, ,
#1

Hey folks,
anyone know how to get rid of this thin line under all the tabs in a QTabWidget so it can be more like a maya native bit of UI? I tried a stylesheet of ("QTabWidget::pane {border: 0px solid #000000;}") which does remove it but breaks more things for some reason (second image), making the unselected tabs as light as the selected tabs, no idea why, guess my stylesheet experience is failing me. thanks

from PySide2 import QtWidgets
        
class Tab1(QtWidgets.QWidget):
    
    def __init__(self, parent=None, ):
        super(Tab1, self).__init__(parent)
        
        main_layout = QtWidgets.QVBoxLayout(self)
        main_layout.addWidget(QtWidgets.QLabel("Tab:"))
        main_layout.addStretch()

        
class TabWidgetTesting(QtWidgets.QDialog):

    def __init__(self, parent=None):
        super(TabWidgetTesting, self).__init__(parent=parent)
        self.setMinimumSize(240, 320)

        self.create_widgets()
        self.create_layouts()
    
    def create_widgets(self):
        self.Tab1 = Tab1()
        self.Tab2 = Tab1()
        
        self.tab_widget = QtWidgets.QTabWidget()
        #self.tab_widget.setStyleSheet("QTabWidget::pane {border: 0px solid #000000;}") 
        self.tab_widget.addTab(Tab1(), "Tab 1")
        self.tab_widget.addTab(Tab1(), "Tab 2")
        
        
    def create_layouts(self):
        main_layout = QtWidgets.QVBoxLayout(self)
        main_layout.addWidget(self.tab_widget)
    

if __name__ == "__main__":
    test_dialog = TabWidgetTesting()
    test_dialog.show()

01
02

2 Likes
#2

As far as I know, this is simply tedious. If somebody else knows a good workaround, please share.

Maya doesn’t use stylesheets, it uses QStyle. And unfortunately QStyle and stylesheets don’t mix well. So if you do set a stylesheet on a widget, it overrides a bunch of other values that you didn’t explicitly set in your stylesheet. That’s why it looks bad when you set the stylesheet.

You could, of course, make a stylesheet that explicitly sets all of those values. But there’s no easy way to know which values. And there is no way to extract an equivalent stylesheet from Maya. It’s just tedious guess-n-check work. (I couldn’t find anywhere that somebody has done this and shared their code. Certainly worth double checking, though. Maybe your Google-fu is stronger)

Another way I know of that could work (but I have NOT yet tried) is using a QtWidgets.QProxyStyle. From what I understand, you would have to subclass it and override some methods to change how the QTabWidget pane is drawn. Then you wrap the current style in that proxy, and set that proxy style on your dialog. I don’t know how much work it is, but I think it is the “Technically Correct™” way to do this.

1 Like
#3

Thanks, this was driving me up the wall but that answer makes terrible, horrible sense.

Annoying this hack, moving the tab bar down seems to make it look the same, or 1 pixel off or something. self.tab_widget.setStyleSheet("QTabWidget:tab-bar:top {top: 1px;}")