I'm trying to achieve something like the tabs from a Browser. All tabs must have the same width and also be expandable so when there are a lot of them they need to resize and fit the window (exactly like Chrome or Firefox does).
The Problem:
If a tab have more text then the other tabs, the tab will be larger. Like so:
And if I spawn a lot of tabs, it will always be larger then the others.
What I have tried:
I have tried to add a stylesheet to change the width, but if I change the width to a specific number, the tabs will be static and not resize based on the number of tabs to fit the window. Also I tried to tweak with min/max width, messing with the QSizePolicy, but no chance.
I have looked at the documentation of QT5 for C++ and googled a lot, but no place talks about this or any option about this.
Maybe I need to do some calculations in python and add to a stylesheet as a argument, but not sure how. Maybe there is a simple option that I'm missing.
My code: (This is the full code, so you can copy-paste and test it if you need)
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QTabWidget,\
QVBoxLayout, QHBoxLayout, QSizePolicy
class Container(QWidget):
def __init__(self, text):
super(Container, self).__init__()
self.hbox = QHBoxLayout()
self.hbox.setSpacing(0)
self.hbox.setContentsMargins(0, 0, 0, 0)
self.setLayout(self.hbox)
self.button = QPushButton(text)
self.hbox.addWidget(self.button)
class CustomWidget (QWidget):
def __init__(self, parent=None):
super(CustomWidget, self).__init__(parent)
self.button = QPushButton("Add tab")
self.button.clicked.connect(self.buttonClicked)
self.tabs = QTabWidget()
self.tabs.setTabsClosable(True)
self.tabs.setMovable(True)
self.tabs.setDocumentMode(True)
self.tabs.setElideMode(Qt.ElideRight)
self.tabs.setUsesScrollButtons(True)
self.tabs.tabCloseRequested.connect(self.closeTab)
self.tabs.addTab(Container("Very big titleeeeeeeeee"),
"Very big titleeeeeeeeeeee")
self.tabs.addTab(Container("smalltext"), "smalltext")
self.tabs.addTab(Container("smalltext2"), "smalltext2")
vbox = QVBoxLayout()
vbox.addWidget(self.button)
vbox.addWidget(self.tabs)
self.setLayout(vbox)
self.resize(600, 600)
def closeTab(self, index):
tab = self.tabs.widget(index)
tab.deleteLater()
self.tabs.removeTab(index)
def buttonClicked(self):
self.tabs.addTab(Container("smalltext2"), "smalltext2")
app = QApplication([])
app.setStyleSheet("""
QTabBar::tab {
background: lightgray;
color: black;
border: 0;
/* min-width: 100px; */
max-width: 200px;
/* width: 150px; */
height: 20px;
padding: 5px;
}
QTabBar::tab:selected {
background: gray;
color: white;
}
""")
widget = CustomWidget()
widget.show()
sys.exit(app.exec_())
Other information:
Operating System: Windows 10
Python Version: 3.6.2
PyQt Version: 5.9.1
To set the width for all tabs we must override the
tabSizeHint()
method, in this case we return the same width for all tabs.After assigning this custom tabBar we use the
setTabBar()
method ofQTabWidget
.Output:
The example can be found in the following link