Adding QScrollArea to QTabWidget

Question

I'm trying to add a scroll area to a QTabWideget.
At the moment I've set it up with two different tabs and the scrollArea is added to the second tab.
When I run my program, items are added to the scrollArea and the scroll bar is visible(policy set to always show), but it's greyed out.

Code:

class MyTableWidget(QWidget):         
    def __init__(self, parent):   
        super(QWidget, self).__init__(parent)
        self.layout = QVBoxLayout(self)

        # Initialize tab screen
        self.tabs = QTabWidget()
        self.tab1 = QWidget()   
        self.tab2 = QScrollArea()
        self.tabs.setMaximumWidth(300)
        self.tabs.setMaximumHeight(100)

        # Add tabs
        self.tabs.addTab(self.tab1,"Tab 1")
        self.tabs.addTab(self.tab2,"Tab 2")

        # Create first tab
        # ...

        # Create second tab
        self.tab2.layout = QFormLayout(self)
        self.tab2.setWidgetResizable(True)
        self.tab2.setVerticalScrollBar(QScrollBar())
        self.tab2.setVerticalScrollBarPolicy(2)
        self.tab2.setFixedSize(100, 70)

        self.t1 = QLabel('Test1', self)
        self.t2 = QLabel('Test2', self)
        self.t3 = QLabel('Test3', self)
        self.t4 = QLabel('Test4', self)
        self.t5 = QLabel('Test5', self)
        self.t6 = QLabel('Test6', self)
        self.tab2.layout.addRow(self.t1)
        self.tab2.layout.addRow(self.t2)
        self.tab2.layout.addRow(self.t3)
        self.tab2.layout.addRow(self.t4)
        self.tab2.layout.addRow(self.t5)
        self.tab2.layout.addRow(self.t6)
        self.tab2.setLayout(self.tab2.layout)

        # Add tabs to widget        
        self.layout.addWidget(self.tabs)
        self.setLayout(self.layout)

Code above turns out like this:

All squished together. I would like to be able to scroll and add more data without squishing whats there already.

Also, can I make the scroll area have the same background as seen in the picture below?

score 4 · Accepted Answer · answered May 30 '18 at 14:54

You do not have to replace the QScrollArea layout but add a new widget that has the QFormLayout as shown below.

from PyQt5.QtWidgets import QWidget, QVBoxLayout, QApplication, \
    QTabWidget, QScrollArea, QFormLayout, QLabel


class MyTableWidget(QWidget):

    def __init__(self, parent=None):
        super(QWidget, self).__init__(parent)
        self.layout = QVBoxLayout(self)

        self.tabs = QTabWidget()
        self.tab1 = QWidget()
        self.tab2 = QScrollArea()

        self.tabs.addTab(self.tab1, 'Tab 1')
        self.tabs.addTab(self.tab2, 'Tab 2')

        content_widget = QWidget()
        self.tab2.setWidget(content_widget)
        flay = QFormLayout(content_widget)
        self.tab2.setWidgetResizable(True)
        self.t1 = QLabel('Test1')
        self.t2 = QLabel('Test2')
        self.t3 = QLabel('Test3')
        self.t4 = QLabel('Test4')
        self.t5 = QLabel('Test5')
        self.t6 = QLabel('Test6')

        flay.addRow(self.t1)
        flay.addRow(self.t2)
        flay.addRow(self.t3)
        flay.addRow(self.t4)
        flay.addRow(self.t5)
        flay.addRow(self.t6)

        self.layout.addWidget(self.tabs)
        self.resize(300, 100)


if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    w = MyTableWidget()
    w.show()
    sys.exit(app.exec_())

Adding QScrollArea to QTabWidget

1 Answers1