Add scroll bar into tab PYQT5

Question

I wanted to create a scrollbar(pyqt5) into tab, base on example in link below I did some changes to fit my need but the scrollbar didn't show on tab and my charts become smaller.

example PyQt4 - how to add scrollbar into tabbed windows of fixed size?

import file https://filebin.net/u3m7m3x2k74wlm6l

import sys
import os
import pandas as pd
from PyQt5.QtWidgets import ( QApplication, QWidget,QHBoxLayout,QVBoxLayout,QPushButton,QTabWidget,QMainWindow,QGridLayout,QSizePolicy\
                            ,QScrollArea,QGroupBox)
from PyQt5.QtGui import *
from PyQt5.QtCore import *
#import html 
import plotly.offline as po
import plotly.express as px
import plotly.graph_objs as go
from PyQt5.QtWebEngineWidgets import *

class Win(QMainWindow):
    def __init__(self):
        super().__init__()    
        self.setGeometry(100,100, 1280,900)
        self.GuiApp=App()
        self.setCentralWidget(self.GuiApp)
        self.show()

class Tab1(QWidget):
    def __init__(self, parent=None):
        super(Tab1, self).__init__(parent)

        df = pd.read_csv(r'C:/Users/User/Desktop/Python-setup test/Plot122.csv')# need to download the file from https://filebin.net/u3m7m3x2k74wlm6l 
        data1 = px.line(df,x = 'Date', y ='AAPL.Open', color = 'Category')
        fig4 = go.Figure(data1)
        raw_html = '<html><head><meta charset="utf-8" />'
        raw_html += '<script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>'
        raw_html += '<body>'
        raw_html += po.plot(fig4, include_plotlyjs=False, output_type='div')
        raw_html += '</body></html>'
#fig_view
        fig_view1 = QWebEngineView()
        fig_view2 = QWebEngineView()
        fig_view3 = QWebEngineView()
        fig_view4 = QWebEngineView()

        fig_view1.setHtml(raw_html)
        fig_view1.setFixedSize(700,600)
        fig_view1.show()

        fig_view2.setHtml(raw_html)
        fig_view2.setFixedSize(700,600)
        fig_view2.show()

        fig_view3.setHtml(raw_html)
        fig_view3.setFixedSize(700,600)
        fig_view3.show()

        fig_view4.setHtml(raw_html)
        fig_view4.setFixedSize(700,600)
        fig_view4.show()

        layoutC = QGridLayout()
        layoutC.addWidget(fig_view1,0,0,1,1)
        layoutC.addWidget(fig_view2,0,1,1,1)
        layoutC.addWidget(fig_view3,1,0,1,1)
        layoutC.addWidget(fig_view4,1,1,1,1)

        self.setLayout(layoutC)     
        self.setSizePolicy(QSizePolicy.Maximum,QSizePolicy.Maximum)


class App(QWidget):
    def __init__(self):
        super().__init__()
        self.layout = QGridLayout(self)
        self.setLayout(self.layout)
        #Button
        BT1 = QPushButton('BT1',self) 
        self.layout.addWidget(BT1, 0,0,1,1) 
        

        ##########################################TEST scrollbar in tab ################################################
        tab1 = Tab1(self)

        self.tabs = QTabWidget(self)     
        self.tabs.addTab(tab1, 'Page 1')

        self.groupscrollbox = QGroupBox() 
        self.MVB = QVBoxLayout() 
        self.MVB.addWidget(self.tabs)      
        
        widgetTab = QWidget(self)  
        widgetTab.setLayout(QVBoxLayout())
        widgetTab.layout().addWidget(self.groupscrollbox) 

        self.scroll = QScrollArea()
        self.scroll.setWidget(widgetTab) 
        self.scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        self.scroll.setWidgetResizable(False)
        self.scroll.setEnabled(True)

        self.groupscrollbox.setLayout(self.MVB) 

        ##########################################TEST scrollbar in tab ################################################  
        self.layout.addWidget(self.groupscrollbox, 0,2,13,1) 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Win()
    sys.exit(app.exec_())

I want to add scrollbar in the red box which the code between "TEST scrollbar in tab" to show all charts with "Date, It will be overlapped when maximize the window. Below shows the Charts with "Date" below the charts

the code is reproducible with the CSV from https://filebin.net/u3m7m3x2k74wlm6l, and both python file and CSV from same directory. — Issac_n, Aug 03 '20 at 17:20

score 7 · Accepted Answer · answered Aug 03 '20 at 17:40

The solution is to put "tab1" is a QScrollArea, and that QScrollArea in the QTabWidget

class App(QWidget):
    def __init__(self):
        super().__init__()
        bt1_button = QPushButton("BT1")
        tab1 = Tab1()

        scrollbar = QScrollArea(widgetResizable=True)
        scrollbar.setWidget(tab1)

        tabwidget = QTabWidget()
        tabwidget.addTab(scrollbar, "Tab1")

        layout = QGridLayout(self)
        layout.addWidget(bt1_button, 0, 0)
        layout.addWidget(tabwidget, 0, 1, 2, 1)

Add scroll bar into tab PYQT5

1 Answers1