Develop Reference

How to call function when space key is pressed inside the lineEdit

I want to call a function that checks words count in a lineEdit whenever I press space key inside the lineEdit. But how can I do that. After executing the python file press 'Start Game' to go to the lineEdit. Thanks!
Here's my code:
from PyQt5.QtWidgets import QMainWindow, QApplication, QLabel, QLineEdit, QPushButton, QTextBrowser, QStackedWidget, QWidget, QLCDNumber, QComboBox
from PyQt5 import uic
import sys
from PyQt5.QtGui import QKeyEvent
from PyQt5.QtCore import QThread, pyqtSignal, Qt
import random
class UI(QMainWindow):
def __init__(self):
super(UI, self).__init__()
# Load the ui file
uic.loadUi("Typing_test_UI.ui", self)
# Define our widgets
self.textBrowser = self.findChild(QTextBrowser, "textBrowser")
self.lineEdit = self.findChild(QLineEdit, "lineEdit")
self.counter = self.findChild(QLCDNumber, "counter")
self.startBtn = self.findChild(QPushButton, "startBtn")
self.timeCombo = self.findChild(QComboBox, "timeCombo")
self.difficultyCombo = self.findChild(QComboBox, "difficultyCombo")
self.stackedWidget = self.findChild(QStackedWidget, "stackedWidget")
self.startPage = self.findChild(QWidget, "startPage")
self.gamePage = self.findChild(QWidget, "gamePage")
self.scorePage = self.findChild(QWidget, "scorePage")
self.highScoreLabel = self.findChild(QLabel, "highScoreLabel")
self.scoreLabel = self.findChild(QLabel, "scoreLabel")
self.retryBtn = self.findChild(QPushButton, "retryBtn")
self.space_count = 0
self.startBtn.clicked.connect(self.start_game)
self.retryBtn.clicked.connect(self.goto_home_page)
# Show the app
self.show()
def start_game(self):
self.stackedWidget.setCurrentWidget(self.gamePage)
self.textBrowser.clear()
with open("Typing_sentences.txt", "r") as f:
all_texts = f.readlines()
lines_of_text = len(all_texts)
self.textBrowser.append(all_texts[random.randint(0, lines_of_text-1)])
def goto_home_page(self):
self.stackedWidget.setCurrentWidget(self.startPage)
app = QApplication(sys.argv)
UIWindow = UI()
app.exec_()
The sentences for a function in my code:
He found himself sitting at his computer, typing whatever came to mind. He was on a website entitled 10 fast fingers. This site tested how fast you were at typing. So he typed. He was currently typing about himself typing, which is odd in a way. He was now describing about how he was typing about himself typing.
The Internet is the global system of interconnected computer networks that uses the Internet protocol suite to communicate between networks and devices. It is a network of networks that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and file sharing.
The ui file:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>801</width>
<height>443</height>
</rect>
</property>
<property name="minimumSize">
<size>
<width>801</width>
<height>443</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>801</width>
<height>443</height>
</size>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QStackedWidget" name="stackedWidget">
<property name="currentIndex">
<number>2</number>
</property>
<widget class="QWidget" name="startPage">
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QWidget" name="widget_3" native="true">
<widget class="QComboBox" name="timeCombo">
<property name="geometry">
<rect>
<x>280</x>
<y>60</y>
<width>201</width>
<height>41</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>11</pointsize>
</font>
</property>
<item>
<property name="text">
<string>1 Minute</string>
</property>
</item>
<item>
<property name="text">
<string>2 Minutes</string>
</property>
</item>
<item>
<property name="text">
<string>5 Minutes</string>
</property>
</item>
<item>
<property name="text">
<string>10 Minutes</string>
</property>
</item>
</widget>
<widget class="QComboBox" name="difficultyCombo">
<property name="geometry">
<rect>
<x>280</x>
<y>130</y>
<width>201</width>
<height>41</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>12</pointsize>
</font>
</property>
<item>
<property name="text">
<string>Easy</string>
</property>
</item>
<item>
<property name="text">
<string>Medium</string>
</property>
</item>
<item>
<property name="text">
<string>Hard</string>
</property>
</item>
</widget>
<widget class="QPushButton" name="startBtn">
<property name="geometry">
<rect>
<x>230</x>
<y>230</y>
<width>301</width>
<height>61</height>
</rect>
</property>
<property name="font">
<font>
<pointsize>16</pointsize>
</font>
</property>
<property name="text">
<string>Start Game</string>
</property>
</widget>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="gamePage">
<layout class="QGridLayout" name="gridLayout_2">
<item row="0" column="0" alignment="Qt::AlignRight|Qt::AlignTop">
<widget class="QWidget" name="widget_2" native="true">
<property name="layoutDirection">
<enum>Qt::LeftToRight</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<item alignment="Qt::AlignRight">
<widget class="QLCDNumber" name="counter">
<property name="minimumSize">
<size>
<width>150</width>
<height>30</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>150</width>
<height>16777215</height>
</size>
</property>
<property name="layoutDirection">
<enum>Qt::RightToLeft</enum>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item row="1" column="0">
<widget class="QWidget" name="widget" native="true">
<layout class="QGridLayout" name="gridLayout">
<item row="0" column="0" colspan="2">
<widget class="QTextBrowser" name="textBrowser"/>
</item>
<item row="1" column="0" colspan="2">
<widget class="QLineEdit" name="lineEdit">
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>45</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>16777215</width>
<height>45</height>
</size>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="scorePage">
<widget class="QLabel" name="scoreLabel">
<property name="geometry">
<rect>
<x>240</x>
<y>90</y>
<width>300</width>
<height>71</height>
</rect>
</property>
<property name="minimumSize">
<size>
<width>300</width>
<height>0</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>16777215</width>
<height>100</height>
</size>
</property>
<property name="font">
<font>
<pointsize>20</pointsize>
</font>
</property>
<property name="text">
<string>Score: 0</string>
</property>
</widget>
<widget class="QPushButton" name="retryBtn">
<property name="geometry">
<rect>
<x>652</x>
<y>320</y>
<width>121</width>
<height>64</height>
</rect>
</property>
<property name="minimumSize">
<size>
<width>64</width>
<height>64</height>
</size>
</property>
<property name="text">
<string>Retry</string>
</property>
<property name="iconSize">
<size>
<width>64</width>
<height>64</height>
</size>
</property>
</widget>
<widget class="QLabel" name="highScoreLabel">
<property name="geometry">
<rect>
<x>291</x>
<y>185</y>
<width>200</width>
<height>18</height>
</rect>
</property>
<property name="minimumSize">
<size>
<width>200</width>
<height>0</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>16777215</width>
<height>50</height>
</size>
</property>
<property name="font">
<font>
<pointsize>9</pointsize>
</font>
</property>
<property name="text">
<string>High Score: 0</string>
</property>
</widget>
</widget>
</widget>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>801</width>
<height>26</height>
</rect>
</property>
<widget class="QMenu" name="menuPapers">
<property name="title">
<string>Options</string>
</property>
<widget class="QMenu" name="menuTest_papers">
<property name="title">
<string>Test papers</string>
</property>
<addaction name="actionRandom"/>
<addaction name="actionChoose"/>
</widget>
<addaction name="menuTest_papers"/>
<addaction name="actionReset"/>
</widget>
<addaction name="menuPapers"/>
</widget>
<action name="actionRandom">
<property name="text">
<string>Random</string>
</property>
</action>
<action name="actionChoose">
<property name="text">
<string>Choose</string>
</property>
</action>
<action name="actionReset">
<property name="text">
<string>Reset High Score</string>
</property>
</action>
</widget>
<resources/>
<connections/>
</ui>

Here is an example of installing an Event Filter on the QLineEdit as suggested. See the inline comments for details and explanation.
...
class UI(QMainWindow):
def __init__(self):
super(UI, self).__init__()
# Load the ui file
uic.loadUi("Typing_test_UI.ui", self)
# Define our widgets
...
...
self.spaceFilter = SpaceFilter(parent=self) # init filter
self.spaceFilter.spacePressed.connect(self.my_function) # connect to the signal
self.lineEdit.installEventFilter(self.spaceFilter) # install on lineedit
self.space_count = 0
self.startBtn.clicked.connect(self.start_game)
self.retryBtn.clicked.connect(self.goto_home_page)
# Show the app
self.show()
def my_function(self): # custom function that runs when space bar is
for i in range(5): # pressed while typing in the line edit
for i in range(1000):
print(str(i), end="\r")
def start_game(self):
self.stackedWidget.setCurrentWidget(self.gamePage)
self.textBrowser.clear()
with open("list1.txt", "r") as f:
all_texts = f.readlines()
lines_of_text = len(all_texts)
self.textBrowser.append(all_texts[random.randint(0, lines_of_text-1)])
def goto_home_page(self):
self.stackedWidget.setCurrentWidget(self.startPage)
class SpaceFilter(QObject): # the event filter object
spacePressed = pyqtSignal() # the signal emited when space bar detected
def eventFilter(self, widget, event):
if event.type() == QEvent.KeyPress: # listen for key press events
if event.key() == Qt.Key.Key_Space: # if the key is the space bar
self.spacePressed.emit() # emit the signal
return False

How to make the QPushButtons and ToolBox Tabs expand to 100% width

I am trying to create a Side Menu in PyQt, similar to this one: https://www.youtube.com/watch?v=O9l75KOB2pE
To create "sub-menus" in the Menu, I opted for the "ToolBox" and then added a QPushButton after ToolBox (which would be a single button below the Sub-Menus. It also helps the "un-opened" sub-menus to not go to the end of Frame)
However, I am facing multiple issues while doing so. In the video, he added a border-bottom under every button and also added a border-left when a button is hovered upon.
I did the same, but apparently my buttons aren't fully expanded and hence the border-bottom is added only below the "text" of the QPushButton and not the whole menu. Similarly, the border-left gets added to the very left of the QPushButton's text (and not to the left of the Side Menu).
Moreover, the Tabs of the Toolbox are also shrinked (that is, full text is not shown in them. That is also probably because it is not getting the whole width of the Side Menu's frame)
I tried to play with the "SizePolicy" of different widgets to somehow make the Buttons expand fully in the width, but nothing is working for me. Can anyone help me solve the issue?
Here is the .ui code of my current program,
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="windowModality">
<enum>Qt::NonModal</enum>
</property>
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>1074</width>
<height>751</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<property name="styleSheet">
<string notr="true">* {
border: none;
}
.QTableWidget
{
alternate-background-color: rgb(241, 241, 241);
background-color: white;
}
.QTableWidget:item
{
color: black;
padding: 5px;
}
.QHeaderView::section
{
background-color: white;
color: black;
font-weight: bold;
border: 0px;
border-bottom: 1px solid;
}</string>
</property>
<widget class="QWidget" name="centralwidget">
<property name="styleSheet">
<string notr="true">background-color: white;</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QFrame" name="side_menu_container">
<property name="maximumSize">
<size>
<width>230</width>
<height>16777215</height>
</size>
</property>
<property name="styleSheet">
<string notr="true">background-color: #1b1b1b;
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
letter-spacing: 1px;
</string>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>6</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item alignment="Qt::AlignTop">
<widget class="QFrame" name="frame">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_42">
<property name="spacing">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item alignment="Qt::AlignLeft|Qt::AlignTop">
<widget class="QFrame" name="frame_46">
<property name="styleSheet">
<string notr="true">font-size: 21px;
</string>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_4">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item alignment="Qt::AlignLeft|Qt::AlignTop">
<widget class="QLabel" name="label_2">
<property name="font">
<font>
<family>Arial</family>
<pointsize>-1</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="text">
<string>Timetable Manager</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QFrame" name="frame_45">
<property name="enabled">
<bool>true</bool>
</property>
<property name="styleSheet">
<string notr="true">background-color: #1e1e1e;</string>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_20">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QFrame" name="side_menu">
<property name="minimumSize">
<size>
<width>228</width>
<height>0</height>
</size>
</property>
<property name="styleSheet">
<string notr="true">QPushButton
{
font-size: 16px;
line-height: 60px;
padding: 5px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
border-left: 1px solid transparent;
}
QPushButton:hover
{
color: cyan;
background-color: #1e1e1e;
border-left: 1px solid cyan;
}
QToolBox::tab
{
font-size: 15px;
border: none;
}
QToolBox::tab:selected
{
background-color: #1e1e1e;
border-left: 1px solid cyan;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}</string>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_3">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>10</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QFrame" name="frame_4">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_5">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item alignment="Qt::AlignLeft|Qt::AlignTop">
<widget class="QToolBox" name="toolBox">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="currentIndex">
<number>0</number>
</property>
<widget class="QWidget" name="page_2">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>230</width>
<height>201</height>
</rect>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<attribute name="icon">
<iconset resource="icons.qrc">
<normaloff>:/icons/icons/down-arrrow-navigate.png</normaloff>
<normalon>:/icons/icons/chevron-down.svg</normalon>:/icons/icons/down-arrrow-navigate.png</iconset>
</attribute>
<attribute name="label">
<string>Registration Details</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_6">
<item alignment="Qt::AlignTop">
<widget class="QFrame" name="frame_5">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QFormLayout" name="formLayout">
<property name="leftMargin">
<number>15</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item row="1" column="0">
<widget class="QPushButton" name="course_menu_button">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>Courses</string>
</property>
</widget>
</item>
<item row="2" column="0">
<widget class="QPushButton" name="room_menu_button">
<property name="text">
<string>Rooms</string>
</property>
</widget>
</item>
<item row="3" column="0">
<widget class="QPushButton" name="teacher_menu_button">
<property name="text">
<string>Teachers</string>
</property>
</widget>
</item>
<item row="4" column="0">
<widget class="QPushButton" name="registered_menu_button">
<property name="text">
<string>Registered Courses</string>
</property>
</widget>
</item>
<item row="0" column="0">
<widget class="QPushButton" name="section_menu_button">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="font">
<font>
<family>Arial</family>
<pointsize>-1</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>Sections</string>
</property>
<property name="iconSize">
<size>
<width>32</width>
<height>32</height>
</size>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="page_3">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>230</width>
<height>102</height>
</rect>
</property>
<attribute name="icon">
<iconset resource="icons.qrc">
<normaloff>:/icons/icons/chevron-down.svg</normaloff>:/icons/icons/chevron-down.svg</iconset>
</attribute>
<attribute name="label">
<string>Teacher Preferences</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_13">
<item alignment="Qt::AlignTop">
<widget class="QFrame" name="frame_32">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_14">
<item>
<widget class="QPushButton" name="room_preference_menu_button">
<property name="text">
<string>Room Preferences</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="slot_preference_menu_button">
<property name="text">
<string>Slot Preferences</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
<widget class="QWidget" name="page">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>230</width>
<height>138</height>
</rect>
</property>
<attribute name="label">
<string>Page</string>
</attribute>
<layout class="QVBoxLayout" name="verticalLayout_17">
<item alignment="Qt::AlignTop">
<widget class="QFrame" name="frame_43">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_18">
<item>
<widget class="QPushButton" name="student_clash_menu_button">
<property name="text">
<string>Student Clashes</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="room_clash_menu_button">
<property name="text">
<string>Room Clashes</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="instructor_clash_menu_button">
<property name="text">
<string>Instructor Clashes</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QFrame" name="frame_44">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_19">
<item alignment="Qt::AlignTop">
<widget class="QPushButton" name="pushButton_2">
<property name="text">
<string>PushButton</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QFrame" name="main_body">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
</layout>
</widget>
</item>
</layout>
</widget>
</widget>
<resources>
<include location="icons.qrc"/>
</resources>
<connections/>
</ui>

There are various issues with the provided UI.
The problem with the buttons has various reasons, and cannot be easily solved from Designer, especially because you changed a lot of properties (many of which are propagated, including stylesheets).
First of all, the left border is shifted because all layouts have a default margin in most systems, so you have to explicitly set it to 0.
In Designer, select each page from the object inspector, scroll to the bottom of the property editor and change the layoutLeftMargin property to 0. If the property is already 0 but is not shown in bold (which indicates whether a property uses the default value or an explicit one), change to another number and then set it again to 0. Then do the same with the frame you've added in that page.
The problem of the "incomplete" bottom border on the first frame is due to the fact that you used a QFormLayout, which in some styles makes button occupy only the minimum size, instead of making them expand.
Change it to a vertical layout, and then add the following to the side_menu stylesheet of the QPushButton selector:
text-align: left;
Also note that with such a complex widget structure, you should be careful in not setting too many stylesheets in different places: not only it's usually unnecessary, but it makes it also difficult to track them (at some point you might face some unexpected behavior, and finding the actual source of the problem can become very hard). Consider that it's usually better to not set generic stylesheet properties on parents like you did for side_menu_container, or even the main window. Complex widgets like scroll areas and combo boxes require that if you set a property then you have to set all properties. Using specific selectors (and not the wildcard one!) is a better and safer choice. Also note that the letter-spacing is not a recognized property of QSS, so you should remove it.
A well written stylesheet should be set for the top level widget (or even the application), and eventually set a specific stylesheet for a widget only if it's actually required for that widget.
Finally, you've set a layout alignment in some widgets, and that prevents them to be properly displayed, since setting the alignment results in making the widget only use its basic size hint, even if there's more space available.
The issue with the elided text of the tool box buttons is a bit more tricky. The issue arises from the fact that the QStyleSheetStyle (a special and private QStyle that is automatically set on a widget that has a stylesheet or inherits one) automatically uses elided text, and it seems that the implementation is not well done as the style option doesn't correctly initialize the available text rectangle. I strongly believe that this is a bug.
If no stylesheet were set, the solution would be simple: use a QProxyStyle and override drawControl in order to draw the button text on your own. Unfortunately, this isn't possible for stylesheets as drawControl is never called, because it's overridden by the installed QStyleSheetStyle.
But, drawItemText() is called, so there is a possible, a bit hacky and complex solution.
Unfortunately, drawItemText() has no reference for the widget, as it only paints the text with the given options.
The trick is to use a promoted widget for the toolbox, set the custom proxy style for it, and override some of its function to keep track of the "actual" names using identifiers, and then call the base implementation with the real name.
class ToolBox(QtWidgets.QToolBox):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.names = []
self.nameDict = {}
self.setStyle(ProxyStyle(self))
def updateNames(self):
self.nameDict.clear()
for i, realName in enumerate(self.names):
fakeName = '__{}'.format(i)
super().setItemText(i, fakeName)
self.nameDict[fakeName] = realName
def itemInserted(self, index):
self.names.insert(index, super().itemText(index))
self.updateNames()
def itemRemoved(self, index):
self.names.pop(index)
self.updateNames()
def setItemText(self, index, text):
self.names[index] = text
self.update()
def itemText(self, index):
return self.names[index]
class ProxyStyle(QtWidgets.QProxyStyle):
def __init__(self, toolBox):
super().__init__(QtWidgets.QStyleFactory.create('fusion'))
self.toolBox = toolBox
def drawItemText(self, painter, rect, alignment, palette, enabled, text, role=QtGui.QPalette.NoRole):
text = self.toolBox.nameDict.get(text, text)
super().drawItemText(painter, rect, alignment, palette, enabled, text, role)
To promote the widget, right click on the tool box from the object inspector, select "Promote to...", then type "ToolBox" (our subclass) in the "Promoted class name" field, type the name of the file in which the class is stored (without the extension!), then click "Add" and finally "Promote".
Note that the file of the class can even be the main script, but in that case you must use the final if __name__ == '__main__': block for the application, since the promotion loads the "header" as an import.

Unable to Resize Column Contents according to the values of the column

I have a table which is being populated by the Database (MySQL) at the backend.
I am trying to resize the Columns according to the contents of each column (as much the stretch is possible), however I can't seem to do it.
I looked it up on Stackoverflow and found that I can do it by setting the QScrollAbstractArea.sizeAdjustPolicy to AdjustToContents in the Qt Designer.
I did this but it still did not work.
I further looked it up and found different solutions. One of them was this as well but it also did not work for me,
self.ui.course_table.horizontalHeader().setSectionResizeMode(0, QtWidgets.QHeaderView.Stretch)
self.ui.course_table.horizontalHeader().setSectionResizeMode(1, QtWidgets.QHeaderView.ResizeToContents)
self.ui.course_table.horizontalHeader().setSectionResizeMode(2, QtWidgets.QHeaderView.ResizeToContents)
I have shared a picture of my current table right now and I want to expand each column according to the content I have.
As you can see, there is a lot of space that can be stretched but it is not doing it despite having enough space. Even the Column names are not fully visible and some characters are cut off
In not maximized window form, this is what I get
As for my data, it is coming from MySQL database and it is attached to Button Click (whenever I click on the "Courses" button on the side menu, it will populate the data on the table in the Courses Page)
The function that is populating the table is as follows,
def get_course_data(self):
mycursor = self.DB.cursor() # DB is an object of class
Subquery = "Select course_name, course_code, course_type from tbl_course"
mycursor.execute(Subquery)
numcols = len(mycursor.fetchall()[0])
mycursor.execute(Subquery)
numrows = len(mycursor.fetchall())
self.ui.course_table.setRowCount(numrows)
self.ui.course_table.setColumnCount(numcols+1)
mycursor.execute(Subquery)
tablerow = 0
for row in mycursor.fetchall():
tablecol = 0
layout = QHBoxLayout()
layout.setContentsMargins(0, 0, 0, 0)
layout.setSpacing(0)
delete_button = QPushButton()
icon_delete = QIcon()
icon_delete.addFile(u":/icons/icons/Delete-button.png", QSize(), QIcon.Normal, QIcon.Off)
delete_button.setIcon(icon_delete)
layout.addWidget(delete_button)
edit_button = QPushButton()
index = PySide2.QtCore.QPersistentModelIndex(self.ui.course_table.model().index(tablerow, tablecol))
edit_button.clicked.connect(lambda *args, index=index: self.on_course_edit_click())
icon_edit = QIcon()
icon_edit.addFile(u":/icons/icons/edit-button.png", QSize(), QIcon.Normal, QIcon.Off)
edit_button.setIcon(icon_edit)
layout.addWidget(edit_button)
cellWidget = QWidget()
cellWidget.setLayout(layout)
self.ui.course_table.setCellWidget(tablerow, 3, cellWidget)
while tablecol < numcols:
self.ui.course_table.setItem(tablerow, tablecol, PySide2.QtWidgets.QTableWidgetItem(str(row[tablecol])))
tablecol += 1
tablerow += 1
self.ui.course_table.horizontalHeader().setSectionResizeMode(0, QtWidgets.QHeaderView.Stretch)
self.ui.course_table.horizontalHeader().setSectionResizeMode(1, QtWidgets.QHeaderView.ResizeToContents)
self.ui.course_table.horizontalHeader().setSectionResizeMode(2, QtWidgets.QHeaderView.ResizeToContents)
The layout of this page of mine is as follows, (it basically has three frames who are in horizontal layout and the third frame contains the QTableWidget. The third frame's sizePolicy is set to Expanding so that it covers the whole main body while the two other performs are aligned to the top of the main body)
The .ui file (for only the course widget) is as follows
<widget class="QWidget" name="courses_page">
<layout class="QVBoxLayout" name="verticalLayout_12">
<item alignment="Qt::AlignLeft|Qt::AlignTop">
<widget class="QFrame" name="frame_13">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_12">
<item alignment="Qt::AlignLeft">
<widget class="QLabel" name="label_4">
<property name="font">
<font>
<family>Arial</family>
<pointsize>12</pointsize>
<weight>75</weight>
<bold>true</bold>
</font>
</property>
<property name="text">
<string>Courses Page</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item alignment="Qt::AlignTop">
<widget class="QFrame" name="frame_14">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_13">
<item alignment="Qt::AlignLeft">
<widget class="QFrame" name="frame_16">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_14">
<item>
<widget class="QPushButton" name="pushButton_2">
<property name="font">
<font>
<family>Calibri</family>
<pointsize>10</pointsize>
</font>
</property>
<property name="styleSheet">
<string notr="true">:hover
{
color: red;
font-size: 150%;
}</string>
</property>
<property name="text">
<string>Add New</string>
</property>
<property name="icon">
<iconset resource="icons.qrc">
<normaloff>:/icons/icons/icons8-add-48.png</normaloff>:/icons/icons/icons8-add-48.png</iconset>
</property>
<property name="iconSize">
<size>
<width>24</width>
<height>24</height>
</size>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_3">
<property name="font">
<font>
<family>Calibri</family>
<pointsize>10</pointsize>
</font>
</property>
<property name="text">
<string>Delete All</string>
</property>
<property name="icon">
<iconset resource="icons.qrc">
<normaloff>:/icons/icons/icons8-remove-48.png</normaloff>:/icons/icons/icons8-remove-48.png</iconset>
</property>
<property name="iconSize">
<size>
<width>24</width>
<height>24</height>
</size>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item alignment="Qt::AlignLeft">
<widget class="QFrame" name="frame_17">
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_15">
<item>
<widget class="QLineEdit" name="lineEdit">
<property name="font">
<font>
<family>Arial</family>
<pointsize>10</pointsize>
</font>
</property>
<property name="styleSheet">
<string notr="true">background-color: white;
border-bottom: 1px solid;
color: black;</string>
</property>
<property name="placeholderText">
<string>Search Course</string>
</property>
</widget>
</item>
<item alignment="Qt::AlignLeft">
<widget class="QPushButton" name="pushButton">
<property name="text">
<string/>
</property>
<property name="icon">
<iconset resource="icons.qrc">
<normaloff>:/icons/icons/icons8-search-50.png</normaloff>:/icons/icons/icons8-search-50.png</iconset>
</property>
<property name="iconSize">
<size>
<width>24</width>
<height>24</height>
</size>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QFrame" name="frame_15">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_16">
<item>
<widget class="QTableWidget" name="course_table">
<property name="font">
<font>
<family>Arial</family>
<weight>50</weight>
<bold>false</bold>
<kerning>true</kerning>
</font>
</property>
<property name="styleSheet">
<string notr="true">:item
{
color: black;
}
QHeaderView:section
{
background-color: white;
font-weight: bold;
border: 0px;
}</string>
</property>
<property name="sizeAdjustPolicy">
<enum>QAbstractScrollArea::AdjustToContents</enum>
</property>
<property name="editTriggers">
<set>QAbstractItemView::NoEditTriggers</set>
</property>
<property name="alternatingRowColors">
<bool>true</bool>
</property>
<property name="gridStyle">
<enum>Qt::NoPen</enum>
</property>
<property name="sortingEnabled">
<bool>true</bool>
</property>
<property name="wordWrap">
<bool>true</bool>
</property>
<attribute name="horizontalHeaderMinimumSectionSize">
<number>47</number>
</attribute>
<attribute name="horizontalHeaderHighlightSections">
<bool>true</bool>
</attribute>
<attribute name="horizontalHeaderStretchLastSection">
<bool>false</bool>
</attribute>
<attribute name="verticalHeaderVisible">
<bool>false</bool>
</attribute>
<attribute name="verticalHeaderCascadingSectionResizes">
<bool>false</bool>
</attribute>
<attribute name="verticalHeaderMinimumSectionSize">
<number>28</number>
</attribute>
<attribute name="verticalHeaderHighlightSections">
<bool>true</bool>
</attribute>
<attribute name="verticalHeaderShowSortIndicator" stdset="0">
<bool>true</bool>
</attribute>
<attribute name="verticalHeaderStretchLastSection">
<bool>false</bool>
</attribute>
<row>
<property name="text">
<string>1</string>
</property>
</row>
<row>
<property name="text">
<string>2</string>
</property>
</row>
<column>
<property name="text">
<string>Course Name</string>
</property>
</column>
<column>
<property name="text">
<string>Course Code</string>
</property>
</column>
<column>
<property name="text">
<string>Course Type</string>
</property>
</column>
<column>
<property name="text">
<string>Action</string>
</property>
</column>
<item row="0" column="0">
<property name="text">
<string>Ha</string>
</property>
</item>
<item row="0" column="1">
<property name="text">
<string>111</string>
</property>
</item>
<item row="0" column="2">
<property name="text">
<string>1</string>
</property>
</item>
<item row="0" column="3">
<property name="text">
<string>aaa</string>
</property>
</item>
<item row="1" column="0">
<property name="text">
<string>assa</string>
</property>
</item>
<item row="1" column="1">
<property name="text">
<string>Programming Fundamentals</string>
</property>
</item>
<item row="1" column="2">
<property name="text">
<string>55</string>
</property>
</item>
<item row="1" column="3">
<property name="text">
<string>55</string>
</property>
</item>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
The complete interface.ui code is given here: https://pastebin.com/bSEmRACT
(As an example, I have added two sample rows in the data)
The complete interface.py code is given here: https://pastebin.com/AA79ndcw
The code of main.py is also shared here: https://pastebin.com/EWNAmH6K

Designer Overlapping Issue

I'm having an issue where widgets and layouts starts overlapping inside my scroll area.
My current layout is supposed to be like this:
My layout:
But ends up like this where the widgets starts overlapping (this is with fixed size group box):
Overlapping example:
Or this (without fixed size group box):
"Sqished" widgets and pushed out of view widgets:
I've tried setting fixed sizes and minimum sizes and changing size policies, but whatever I do some widgets get resized anyways and some get overlapped, and some gets pushed out of view.
I am using designer and PyUIC.
This is my hierarchy if that helps:
Qt designer hierarchy:
The .ui file as generated by designer:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Form</class>
<widget class="QWidget" name="Form">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>299</width>
<height>478</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<layout class="QGridLayout" name="gridLayout">
<property name="margin">
<number>0</number>
</property>
<item row="0" column="0">
<widget class="QScrollArea" name="scrollArea">
<property name="baseSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<property name="widgetResizable">
<bool>true</bool>
</property>
<widget class="QWidget" name="scrollAreaWidgetContents">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>295</width>
<height>474</height>
</rect>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>410</height>
</size>
</property>
<layout class="QVBoxLayout" name="verticalLayout_5">
<item>
<layout class="QVBoxLayout" name="verticalLayout">
<property name="spacing">
<number>6</number>
</property>
<property name="sizeConstraint">
<enum>QLayout::SetDefaultConstraint</enum>
</property>
<item>
<widget class="QLabel" name="label_2">
<property name="layoutDirection">
<enum>Qt::LeftToRight</enum>
</property>
<property name="autoFillBackground">
<bool>false</bool>
</property>
<property name="text">
<string>Select a .bed file to open</string>
</property>
</widget>
</item>
<item>
<widget class="BrowseForm" name="browseWidget"/>
</item>
<item>
<widget class="QGroupBox" name="groupBox_2">
<property name="title">
<string>Bead selection mode</string>
</property>
<layout class="QGridLayout" name="gridLayout_2">
<item row="1" column="0">
<widget class="QRadioButton" name="radioStart">
<property name="text">
<string>Start</string>
</property>
<attribute name="buttonGroup">
<string notr="true">beadSelectionModeGroup</string>
</attribute>
</widget>
</item>
<item row="0" column="1">
<widget class="QRadioButton" name="radioInRangeStrict">
<property name="text">
<string>Strictly in range</string>
</property>
<attribute name="buttonGroup">
<string notr="true">beadSelectionModeGroup</string>
</attribute>
</widget>
</item>
<item row="0" column="0">
<widget class="QRadioButton" name="radioInRange">
<property name="text">
<string>In range</string>
</property>
<property name="checked">
<bool>true</bool>
</property>
<attribute name="buttonGroup">
<string notr="true">beadSelectionModeGroup</string>
</attribute>
</widget>
</item>
<item row="1" column="3">
<widget class="QRadioButton" name="radioEnd">
<property name="text">
<string>End</string>
</property>
<attribute name="buttonGroup">
<string notr="true">beadSelectionModeGroup</string>
</attribute>
</widget>
</item>
<item row="1" column="1">
<widget class="QRadioButton" name="radioMiddle">
<property name="text">
<string>Middle</string>
</property>
<attribute name="buttonGroup">
<string notr="true">beadSelectionModeGroup</string>
</attribute>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QGroupBox" name="groupBox">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<property name="baseSize">
<size>
<width>0</width>
<height>150</height>
</size>
</property>
<property name="title">
<string>Colour options</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout_3">
<item>
<widget class="QRadioButton" name="radioSingleColor">
<property name="text">
<string>Use single colour</string>
</property>
<property name="checked">
<bool>true</bool>
</property>
<attribute name="buttonGroup">
<string notr="true">colourButtonGroup</string>
</attribute>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioScoreColor">
<property name="text">
<string>Use score for colours</string>
</property>
<attribute name="buttonGroup">
<string notr="true">colourButtonGroup</string>
</attribute>
</widget>
</item>
<item>
<widget class="QRadioButton" name="radioColorColor">
<property name="text">
<string>Use colour from file</string>
</property>
<attribute name="buttonGroup">
<string notr="true">colourButtonGroup</string>
</attribute>
</widget>
</item>
<item>
<widget class="QStackedWidget" name="stackedWidget">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>92</height>
</size>
</property>
<property name="baseSize">
<size>
<width>100</width>
<height>100</height>
</size>
</property>
<property name="currentIndex">
<number>1</number>
</property>
<widget class="QWidget" name="page">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<property name="topMargin">
<number>0</number>
</property>
<item>
<layout class="QHBoxLayout" name="horizontalLayout_2">
<property name="sizeConstraint">
<enum>QLayout::SetDefaultConstraint</enum>
</property>
<item>
<widget class="QLabel" name="label_5">
<property name="text">
<string>Colour</string>
</property>
</widget>
</item>
<item>
<widget class="QColourPicker" name="colorPicker">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="baseSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>n</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</item>
<item>
<spacer name="verticalSpacer_2">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<widget class="QWidget" name="page_2">
<layout class="QVBoxLayout" name="verticalLayout_9">
<property name="topMargin">
<number>0</number>
</property>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<layout class="QVBoxLayout" name="verticalLayout_8">
<item>
<widget class="QComboBox" name="scoreOrPercentile">
<item>
<property name="text">
<string>Score</string>
</property>
</item>
<item>
<property name="text">
<string>Percentile</string>
</property>
</item>
</widget>
</item>
<item>
<widget class="QLabel" name="label_3">
<property name="text">
<string>Colour gradient</string>
</property>
</widget>
</item>
</layout>
</item>
<item>
<layout class="QVBoxLayout" name="verticalLayout_7">
<item>
<widget class="QLineEdit" name="startGradient">
<property name="text">
<string>0</string>
</property>
</widget>
</item>
<item>
<widget class="QColourPicker" name="colorPickerStartGradient">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="baseSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>n</string>
</property>
</widget>
</item>
</layout>
</item>
<item>
<layout class="QVBoxLayout" name="verticalLayout_6">
<item>
<widget class="QLineEdit" name="endGradient">
<property name="text">
<string>1000</string>
</property>
</widget>
</item>
<item>
<widget class="QColourPicker" name="colorPickerEndGradient">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="baseSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>n</string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</item>
<item>
<widget class="QCheckBox" name="colourBlendCheckBox_2">
<property name="text">
<string>Use colour blend</string>
</property>
</widget>
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout_4">
<item>
<widget class="QLabel" name="label_8">
<property name="text">
<string>Conflict colour</string>
</property>
</widget>
</item>
<item>
<widget class="QColourPicker" name="conflictColorPicker_2">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="baseSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>n</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</item>
<item>
<spacer name="verticalSpacer_3">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<widget class="QWidget" name="page_3">
<layout class="QVBoxLayout" name="verticalLayout_4">
<property name="topMargin">
<number>0</number>
</property>
<item>
<widget class="QCheckBox" name="colourBlendCheckBox">
<property name="text">
<string>Use colour blend</string>
</property>
</widget>
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout_3">
<item>
<widget class="QLabel" name="label_4">
<property name="text">
<string>Conflict colour</string>
</property>
</widget>
</item>
<item>
<widget class="QColourPicker" name="conflictColorPicker">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="baseSize">
<size>
<width>23</width>
<height>23</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>n</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</item>
<item>
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<layout class="QFormLayout" name="formLayout">
<item row="2" column="0">
<widget class="QLabel" name="label">
<property name="text">
<string>Main model ID</string>
</property>
</widget>
</item>
<item row="2" column="1">
<widget class="QLineEdit" name="mainModelId">
<property name="text">
<string>1</string>
</property>
</widget>
</item>
<item row="3" column="0">
<widget class="QLabel" name="label_6">
<property name="text">
<string>New model name</string>
</property>
</widget>
</item>
<item row="3" column="1">
<widget class="QLineEdit" name="modelName">
<property name="text">
<string>bed_model</string>
</property>
</widget>
</item>
<item row="1" column="1">
<widget class="QCheckBox" name="hideOrg">
<property name="text">
<string/>
</property>
<property name="checked">
<bool>false</bool>
</property>
</widget>
</item>
<item row="1" column="0">
<widget class="QLabel" name="label_7">
<property name="text">
<string>Hide beads on main model</string>
</property>
</widget>
</item>
</layout>
</item>
<item>
<widget class="QPushButton" name="generateModelButton">
<property name="text">
<string>Generate Model</string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</widget>
</widget>
</item>
</layout>
</widget>
<customwidgets>
<customwidget>
<class>QColourPicker</class>
<extends>QPushButton</extends>
<header>.qcolourpicker.h</header>
</customwidget>
<customwidget>
<class>BrowseForm</class>
<extends>QLineEdit</extends>
<header>.browseform.h</header>
</customwidget>
</customwidgets>
<resources/>
<connections>
<connection>
<sender>colourButtonGroup</sender>
<signal>buttonClicked(int)</signal>
<receiver>stackedWidget</receiver>
<slot>setCurrentIndex(int)</slot>
<hints>
<hint type="sourcelabel">
<x>-1</x>
<y>-1</y>
</hint>
<hint type="destinationlabel">
<x>217</x>
<y>264</y>
</hint>
</hints>
</connection>
<connection>
<sender>colourBlendCheckBox</sender>
<signal>toggled(bool)</signal>
<receiver>label_4</receiver>
<slot>setDisabled(bool)</slot>
<hints>
<hint type="sourcelabel">
<x>81</x>
<y>215</y>
</hint>
<hint type="destinationlabel">
<x>74</x>
<y>222</y>
</hint>
</hints>
</connection>
<connection>
<sender>colourBlendCheckBox</sender>
<signal>toggled(bool)</signal>
<receiver>conflictColorPicker</receiver>
<slot>setDisabled(bool)</slot>
<hints>
<hint type="sourcelabel">
<x>111</x>
<y>215</y>
</hint>
<hint type="destinationlabel">
<x>104</x>
<y>245</y>
</hint>
</hints>
</connection>
</connections>
<buttongroups>
<buttongroup name="colourButtonGroup"/>
<buttongroup name="beadSelectionModeGroup"/>
</buttongroups>
</ui>
Update: Thanks a lot for the quick and comprehensive answer. For posterity the main fault that caused my issues was that I didn't know setting the minimum size back to 0x0 was not the same as resetting it. Resetting the minimum size of my scroll area and group boxes fixed it!

You've set a minimum height for the scrollAreaWidgetContents container of the scroll area. This results in overriding the minimumSizeHint of the container (which is computed using the minimum size required by all of its items and ensures that all widgets are properly displayed), so the scroll area forces it to be smaller than it should until that minimum height is reached, even if this makes some widgets unusuable or even invisible.
Reset that property completely (using the small red arrow button of the minimum size field) and the widgets will only be resized to their own minimum default size.
Also be aware that you've set a lot of other size related properties that should not be set unless really needed:
the baseSize property is only useful for top level windows and if the sizeIncrement has been set, it's not the "suggested" size of the widget (that depends on the widget's sizeHint; reset all those properties, as they are useless for child widgets;
reset all minimumSize properties that are set to 0x0 or, for container widgets, that are set with size that wouldn't probably allow their children to be properly displayed (same issue as the scroll area);
reset the size policies overrides, unless you really know how they work;
reset the size hint of the spacers, as the stacked widget already takes care of the minimum size required for all its pages, so using a minimum height for spacers can result in having unused blank spaces;
All the reset indications above mean using the small red arrow button, which actually resets the property to the default state of the widget. Note that manually setting a value to what appears to be the default one is not the same as resetting it: the default value of properties can depend on different aspects and might not be the same for all widgets and situations (including the OS/style), and while using the default (property unset) ensures that Qt properly uses the default expected behavior, explicitly setting a value might not have the same result even if it seems the default.
Further suggestions:
the scrollAreaWidgetContents already has a vertical layout set, but you're using a further nested vertical layout that is almost useless. Move every widget from that nested layout to the main one of the scroll area and delete that layout;
form layouts are normally suggested for extended (and possibly dynamic) interfaces; you can use a normal grid layout for the bottom part, since it only contains 3 widgets, and you should also set the checkbox text instead of using a label (the standard convention for checkboxes says that their label should be on the right);
check the tab order, because it seems a bit confused;

How to set Justify-Alignment for check boxes?

I have placed some QCheckBox in horizontal layout (or in grid layout).
The desired output is something like below (to get this output I have added some layout spacing, but it's not very precision):
I have also tried using setAlignment(Qt.AlignCenter) or setAlignment(Qt.AlignJustify), neither is working rightly

A possible solution is to set the horizontal policy to QSizePolicy::Maximum in the QCheckboxes, and place spacers between them:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>600</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QTextEdit" name="textEdit"/>
</item>
<item>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="QCheckBox" name="checkBox">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test1</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_2">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test2</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_3">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test3</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_3">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_4">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test4</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_4">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_5">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test5</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_5">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_6">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test6</string>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_6">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QCheckBox" name="checkBox_7">
<property name="sizePolicy">
<sizepolicy hsizetype="Maximum" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="text">
<string>Test7</string>
</property>
</widget>
</item>
</layout>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>30</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar"/>
</widget>
<resources/>
<connections/>
</ui>