Develop Reference

Space is added to the layout even if nothing was added

I have been designing a PySide6 Application but the problem is that even if I have not added any space to the layout the layout still contains a lot of visible space.
Debug Screenshot with widget borders as red:
Is there anyway to remove the space? Here is the code:
from PySide6 import QtCore
from PySide6.QtWidgets import (
QMainWindow,
QVBoxLayout,
QFormLayout,
QWidget,
QApplication,
QLabel,
QCheckBox,
QHBoxLayout,
QLineEdit,
QFileDialog,
QPushButton
)
import os
import sys
class Styler_Py(QMainWindow):
def __init__(self, parent=None) -> None:
super().__init__(parent)
# Window Setup
self.setWindowTitle("PyStyler")
# Layout setup
self.container_widget = QWidget()
self.main_layout = QVBoxLayout()
self.container_widget.setLayout(self.main_layout)
self.setCentralWidget(self.container_widget)
# Irrelevant code here
# --- New Section ---
self.main_layout.addSpacing(10)
self.main_layout.addStretch()
# --- New Section ---
# Files
self.files_label = QLabel("<h3>Files</h3>") # Note for the future, the closure tag did not have forward slash and have been fixed using an answer below
self.main_layout.addWidget(self.files_label)
self.files_layout = QVBoxLayout()
self.main_layout.addLayout(self.files_layout)
# Files -> Input File
self.input_file = FileInput()
self.input_file_layout = QHBoxLayout()
self.files_layout.addLayout(self.input_file_layout)
self.input_file_label = QLabel("Input File")
self.input_file_layout.addWidget(self.input_file_label)
self.input_file_layout.addWidget(self.input_file)
class FileInput(QWidget):
def __init__(self, start_path=os.path.expanduser("~")) -> None:
super().__init__()
self._main_layout = QHBoxLayout()
self.setLayout(self._main_layout)
# Add Text edit for File Input
self._file_input = QLineEdit(start_path)
self._main_layout.addWidget(self._file_input)
self._file_input_browse = QPushButton("Browse")
self._file_input_browse.clicked.connect(self._browse_file_dialog)
self._main_layout.addWidget(self._file_input_browse)
self._start_path = start_path
def _browse_file_dialog(self):
if os.path.isfile(self._file_input.text()):
path = os.path.abspath(f"{self._file_input.text()}/..")
if os.path.isdir(self._file_input.text()):
path = os.path.abspath(self._file_input.text())
else:
path = self._start_path
file_name = QFileDialog.getOpenFileName(
self, "Open File", path
)
if len(file_name[0]) > 0:
self._file_input.setText(file_name[0])
def get_path(self):
return self._file_input.text()
def main():
app = QApplication(sys.argv)
app.setStyleSheet("*{ border: 1px solid red; }")
window = Styler_Py()
window.show()
app.exec()
main()
I think the problem is somewhere with my custom widget but I could not find it. I have tried adding and removing a lot of the widgets but nothing happens.
Edit
A Screenshot of window when resized to be a little bigger:

The first problem comes from the wrong tag closure, as it should be like this:
self.files_label = QLabel("<h3>Files</h3>")
Then, that spacing is the result of two aspects: layout spacings/margins and rich text margins.
layout spacings are inherited by child layouts from their parent layout (so, the input_file_layout has a default spacing inherited by the files_layout, which in turns inherits that property from the main_layout;
when layout managers are installed on widgets, they use the widget's style layout margins and spacings (QStyle.PM_Layout*Margin and QStyle.PM_Layout*Spacing) unless overriden by layout.setContentsMargins() or layout.setSpacing(); this not only happens top level widgets, but for child widgets too: layouts set on children widgets do not inherit the parent layout margins or spacings, and they use the default system (or style) values; this can be overridden
rich text elements normally result in bigger space required by the label's sizeHint(); unfortunately there's no easy work around for that, as also explained in the Layout Issues documentation;
In order to better understand the boundaries of each widget, you could add a simple stylesheet for testing purposes:
app.setStyleSheet('*{ border: 1px solid black; }')
Please consider that the above will override any widget border (including buttons, for example), so use it only for debugging in order to understand how the layout works; do NOT use it for general purposes, especially if applied on the application.

PyQt - How to use the "setStyleSheet" method properly?

if I use the setStyleSheet method in order to change the style for a specific widget, the other ones placed inside it, changes their style, but I don't want it! I can bring you two example:
when I change the border/background color for a frame (see the widgets placed inside it):
import PyQt5.QtGui as qtg
import PyQt5.QtCore as qtc
import PyQt5.QtWidgets as qtw
import sys
class MainWindow(qtw.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.resize(520,300)
self.setWindowTitle("Treeview Example")
self.layout = qtw.QVBoxLayout()
self.frame1=qtw.QFrame()
self.frame1layout=qtw.QVBoxLayout()
self.frame1layout.setContentsMargins(5, 5, 5, 5)
self.frame1.setLayout(self.frame1layout)
self.frame1.setStyleSheet("border: 1px solid; border-color:red; background-color:white") # I change the style for the main frame
self.layout.addWidget(self.frame1)
self.frame2=qtw.QFrame()
self.frame2layout=qtw.QVBoxLayout()
self.frame2layout.setContentsMargins(10, 10, 10, 10)
self.frame2.setLayout(self.frame2layout)
self.frame1layout.addWidget(self.frame2)
self.ProgressBar=qtw.QProgressBar()
self.frame2layout.addWidget(self.ProgressBar)
self.setLayout(self.layout)
if __name__ == '__main__':
app = qtw.QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
or when I change the border color for a treeview widget (the scrolled treeview widget is became white):
import PyQt5.QtGui as qtg
import PyQt5.QtCore as qtc
import PyQt5.QtWidgets as qtw
import sys
class MainWindow(qtw.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.resize(520,300)
self.setWindowTitle("Treeview Example")
self.layout = qtw.QVBoxLayout()
self.treeview = qtw.QTreeView(self)
self.treeview.setStyleSheet("border: 1px solid; border-color:red") # it destroy the style of the objects inside the treeview widget!
model = qtg.QStandardItemModel()
rootNode = model.invisibleRootItem()
section1 = qtg.QStandardItem("A")
section1.appendRow([qtg.QStandardItem("A1")])
childnode = qtg.QStandardItem("A2")
section1.appendRow([childnode])
section2 = qtg.QStandardItem("B")
section2.appendRow([qtg.QStandardItem("B1")])
section2.appendRow([qtg.QStandardItem("B2")])
rootNode.appendRow([section1])
rootNode.appendRow([section2])
self.treeview.setHeaderHidden(True)
self.treeview.setModel(model)
self.layout.addWidget(self.treeview)
self.setLayout(self.layout)
if __name__ == '__main__':
app = qtw.QApplication(sys.argv)
w = MainWindow()
w.show()
sys.exit(app.exec_())
my question is, how can I change the style of a specific widget without modifying the style of the other ones?
###########
UPDATE:
in my first example, if I don't use the instruction self.treeview.setStyleSheet("border: 1px solid; border-color:red") I realized that the progress bar widget doesn't expand as before. see this screenshot:
what is the issue?

I strongly suggest you to more carefully read the style sheet syntax and reference documentation, as everything is clearly specified and explained there:
Style sheets consist of a sequence of style rules. A style rule is made up of a selector and a declaration. The selector specifies which widgets are affected by the rule; the declaration specifies which properties should be set on the widget.
Stylesheets are, by definition, cascading.
The stylesheet set on a widget is propagated on its children, those children inherit the style of the parent.
If you set a generic property like this:
border: 1px solid black;
The result is that all its children will have that border: you only gave the declaration but without the selector, so a universal selector is used as implicit.
This is not just Qt, this is typical of CSS (from which QSS take their main concepts), and it works exactly as any other widget styling property: setting a font or a palette on a widget, propagates them to all its children.
The difference is that with stylesheets (exactly like standard CSS) you can use selectors.
If you want to style the tree widget only, then use that class selector:
self.treeview.setStyleSheet('''
QTreeView {
border: 1px solid;
border-color:red;
}
''')

Is there a way to change the stylesheet of just OK button of all the QMessageBox?

I would like to have the OK button of all the QMessageBox of my GUI (which is quite complex and so there are a lot of them) set a different color with respect to the other buttons (Cancel, No etc.).
I don't want to set its color every time I create a new QMessageBox but I would like to set it through the stylesheet of my application once and for all.
I tried different options but none of them worked:
- QMessageBox#okButton {background-color:blue}
- QMessageBox::okButton {...}
- QMessageBox:okButton {...}
- QMessageBox#ok-button {...}
- QMessageBox QPushButton#okButton {...}
and others...
Is there a way or do I have to give up?

A possible solution is to set the objectName() to be a selector for each button and for this you can use the notify() method of the QApplication:
from PySide2.QtCore import QEvent
from PySide2.QtWidgets import *
class Application(QApplication):
def notify(self, receiver, event):
if isinstance(receiver, QMessageBox) and event.type() == QEvent.Show:
for button in receiver.buttons():
sb = receiver.standardButton(button)
if not button.objectName():
button.setObjectName(sb.name.decode())
button.style().unpolish(button)
button.style().polish(button)
return super().notify(receiver, event)
def main():
app = Application()
app.setStyle("fusion")
app.setStyleSheet(
"""
QPushButton#Ok { background-color: green }
QPushButton#Cancel { background-color: red }
"""
)
QMessageBox.critical(
None, "Title", "text", buttons=QMessageBox.Ok | QMessageBox.Cancel
)
msgBox = QMessageBox()
msgBox.setText("The document has been modified.")
msgBox.setInformativeText("Do you want to save your changes?")
msgBox.setStandardButtons(QMessageBox.Ok | QMessageBox.Cancel)
msgBox.exec_()
if __name__ == "__main__":
main()

Unfortunately, there's no direct solution, since QDialogButtonBox (which is what QMessageBox uses for its buttons) doesn't provide selectors for button roles.
For staticly created messagebox, the only way is to use the [text="button text"] selector, but that would just be a guess, which could change depending on the localization and the style (which could set a mnemonic, and you cannot even know what that would be for sure). Also, this requires setting the stylesheet for the QApplication.
A possible application wide stylesheet for these situations would look like this:
app.setStyleSheet('''
QDialogButtonBox > QPushButton[text="&OK"] {
background-color: orange;
}
QDialogButtonBox > QPushButton[text="&Cancel"] {
background-color: green;
}
''')
Note that I used the Parent > Class selector in order to ensure that only buttons of QDialogButtonBox are styled with those rules, otherwise any "Ok" button would be orange, etc.
Nonetheless, in the case above on my computer it only works for the Ok button, since my localization (Italian) uses "&Annulla" for the other.
On the other hand, if you're creating QMessageBox instances, there's more freedom and flexibility using selectors based on object names.
The only issue is that since the object name is set after the creation, the stylesheet is not applied, so the buttons must be "unpolished" after instantiation.
A simple subclass could provide a standard interface without complicating things too much:
class ColoredMessageBox(QtWidgets.QMessageBox):
StandardNames = {
QtWidgets.QMessageBox.Ok: 'Ok',
QtWidgets.QMessageBox.Cancel: 'Cancel',
QtWidgets.QMessageBox.Save: 'Save',
# ...
}
def exec_(self):
for button in self.buttons():
objName = self.StandardNames.get(self.standardButton(button))
if objName:
button.setObjectName(objName)
self.style().unpolish(button)
return super().exec_()
import sys
app = QtWidgets.QApplication(sys.argv)
app.setStyleSheet('''
QMessageBox > QDialogButtonBox > QPushButton#Ok {
background-color: orange;
}
QMessageBox > QDialogButtonBox > QPushButton#Cancel {
background-color: blue;
}
''')
w = ColoredMessageBox(QtWidgets.QMessageBox.Information, 'Hello', 'How are you?',
QtWidgets.QMessageBox.Ok | QtWidgets.QMessageBox.Cancel)
w.exec_()

How can I ensure that docked Qt windows have visible controls with a dark platform theme?

Consider the following PyQt program,
import sys
from PyQt5 import QtCore, QtWidgets
class dockdemo(QtWidgets.QMainWindow):
def __init__(self, parent=None):
super(dockdemo, self).__init__(parent)
self.items = QtWidgets.QDockWidget("Dockable", self)
self.listWidget = QtWidgets.QListWidget()
self.listWidget.addItem("item1")
self.listWidget.addItem("item2")
self.listWidget.addItem("item3")
self.items.setWidget(self.listWidget)
self.addDockWidget(QtCore.Qt.RightDockWidgetArea, self.items)
self.setWindowTitle("Dock demo")
def main():
app = QtWidgets.QApplication(sys.argv)
ex = dockdemo()
ex.show()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
This works fine and produces a simple, docked window:
However, this isn't obeying my GTK2 dark platform theme. If I force Qt to do so by setting QT_QPA_PLATFORMTHEME=gtk2, I instead get this:
The docked window's controls are almost the same colour as the background so they're very difficult to see.
GNU Octave in C++ shows its own docked widgets controls correctly in the platform theme:
Octave's docked widgets also show the right controls when not using the system theme.
I suspect it's probably due to some of the CSS it's setting here, but I don't know exactly what: http://hg.savannah.gnu.org/hgweb/octave/file/6d0585c8ee11/libgui/src/octave-dock-widget.cc#l123
Am I doing something wrong? It feels like a bug that Qt isn't properly setting the colours for the docked window's controls unless you do something extra (and what that extra might be, I don't know yet).

Thanks to another answer here, I have a complete solution for my original problem as stated.
It appears that Qt simply hardcodes those icons without regard to the theme, but this is simple to fix.
First, we use the relative luminance to decide if a colour is bright or not,
def is_dark(qt_colour):
r, g, b = qt_colour.red(), qt_colour.green(), qt_colour.blue()
luminance = (0.2126*r + 0.7152*g + 0.0722*b)/256
return luminance < 0.5
and then we grab some icons that are identical but coloured dark and light. I just grabbed Octave's own set of icons:
widget-close-light.svg
widget-undock-light.svg
widget-close.svg
widget-undock.svg
found in its source tree. We place these icons in an img/ subdirectory/subfolder.
Then, we grab the widget's background colour,
bg_colour = self.items.palette().color(QtGui.QPalette.Background)
and depending on that colour, we set the CSS to use the light or the dark set of icons:
if is_dark(bg_colour):
self.items.setStyleSheet(
"""
QDockWidget
{
titlebar-close-icon: url(img/widget-close-light.svg);
titlebar-normal-icon: url(img/widget-undock-light.svg);
}
"""
)
else:
self.items.setStyleSheet(
"""
QDockWidget
{
titlebar-close-icon: url(img/widget-close.svg);
titlebar-normal-icon: url(img/widget-undock.svg);
}
"""
)
This results in proper icons in both light and dark themes!
The complete code now looks like this:
import sys
from PyQt5 import QtCore, QtWidgets, QtGui
def is_dark(qt_colour):
r, g, b = qt_colour.red(), qt_colour.green(), qt_colour.blue()
luminance = (0.2126*r + 0.7152*g + 0.0722*b)/256
return luminance < 0.5
class dockdemo(QtWidgets.QMainWindow):
def __init__(self, parent=None):
super(dockdemo, self).__init__(parent)
self.items = QtWidgets.QDockWidget("Dockable", self)
self.listWidget = QtWidgets.QListWidget()
self.listWidget.addItem("item1")
self.listWidget.addItem("item2")
self.listWidget.addItem("item3")
self.items.setWidget(self.listWidget)
self.addDockWidget(QtCore.Qt.RightDockWidgetArea, self.items)
bg_colour = self.items.palette().color(QtGui.QPalette.Background)
if is_dark(bg_colour):
self.items.setStyleSheet(
"""
QDockWidget
{
titlebar-close-icon: url(img/widget-close-light.svg);
titlebar-normal-icon: url(img/widget-undock-light.svg);
}
"""
)
else:
self.items.setStyleSheet(
"""
QDockWidget
{
titlebar-close-icon: url(img/widget-close.svg);
titlebar-normal-icon: url(img/widget-undock.svg);
}
"""
)
self.setWindowTitle("Dock demo")
def main():
app = QtWidgets.QApplication(sys.argv)
ex = dockdemo()
ex.show()
sys.exit(app.exec_())
if __name__ == '__main__':
main()

Unfortunately the Linux-default Qt Fusion style dock icons are hard-coded as XPM format images in the QFusionStyle (and also in QCommonStyle which is the fallback). And they are never colored to match the theme. A lot of the "standard" icons are like that but many are colored/opaque so the background doesn't make a big difference.
To override them you will need to either use CSS or a custom QProxyStyle.
You can see how it is done in CSS from that example you linked to.
QDockWidget
{
titlebar-close-icon: url(close.svg);
titlebar-normal-icon: url(restore.svg);
}
A custom QStyle is a little more involved...
class AppStyle : public QProxyStyle
{
public:
using QProxyStyle::QProxyStyle;
QIcon standardIcon(StandardPixmap standardIcon, const QStyleOption *option = nullptr, const QWidget *widget = nullptr) const override
{
switch (standardIcon) {
case SP_TitleBarNormalButton:
return QIcon("restore.svg");
case SP_TitleBarCloseButton:
case SP_DockWidgetCloseButton:
return QIcon("close.svg");
default:
return baseStyle()->standardIcon(standardIcon, option, widget);
}
}
QPixmap standardPixmap(StandardPixmap stdPixmap, const QStyleOption *option = nullptr, const QWidget *widget = nullptr) const override
{
switch (stdPixmap) {
case SP_TitleBarNormalButton:
case SP_TitleBarCloseButton:
case SP_DockWidgetCloseButton:
return standardIcon(stdPixmap, option, widget).pixmap(option->rect.size());
default:
return baseStyle()->standardPixmap(stdPixmap, option, widget);
}
}
};
In both cases you'd need to know the theme being used somehow (eg. that it is dark). You'd use different (or dynamic) CSS for each theme, or your custom QProxyStyle would return the correct icon for the base color. In C++ for example you could even determine if the current palette background is dark (low color value) and then return different icons based on that.
P.S. Yes it could probably be considered a "bug" or deficiency that Qt doesn't handle this "automagically" already for dark system themes -- it is also quite annoying when trying to skin an app to be dark regardless of the desktop theme. But c'est la vie.
P.P.S. Whoops, just realized I gave a C++ example for a Python question... I don't use Python with Qt so I'm afraid that's the best I can do.

How to make Icon in QMenu larger (PyQt)?

I did not yet find out how to make the icons in my QMenu larger. I have tried to define a stylesheet in which the icon size is enlarged. But it doesn't work. Here is my code:
menuStyleSheet = ("""
QMenu {
font-size: 18px;
color: black;
border: 2px solid black;
left: 20px;
background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #ffffff);
}
QMenu::item {
padding: 2px 20px 2px 30px;
border: 1px solid transparent; /* reserve space for selection border */
spacing: 20px;
height: 60px;
}
QMenu::icon {
padding-left: 20px;
width: 50px; /* <- unfortunately, doesn't work */
height: 50px; /* <- unfortunately, doesn't work */
}
""")
#####################################################
# THE PYQT APPLICATION #
#####################################################
class GMainWindow(QMainWindow):
def __init__(self, title):
super(GMainWindow, self).__init__()
...
def setCustomMenuBar(self):
myMenuBar = self.menuBar()
global menuStyleSheet
myMenuBar.setStyleSheet(menuStyleSheet)
# Now add Menus and QActions to myMenuBar..
The result of this code is as follows:
I know that there is an old StackOverflow question about a similar topic, but it assumes that one is coding the Qt application in C++. So the situation is different. Here is the link: How to make Qt icon (in menu bar and tool bar) larger?
Any help is greatly appreciated :-)
EDIT :
Here are some details about my machine:
OS: Windows 10
Python: v3 (Anaconda package)
Qt: PyQt5

After a long search, I finally found the solution.
Just copy-paste the code below, and paste it in a *.py file. Of course, you should replace the path to the icon with a valid path on your local computer. Just provide a complete path ("C:\..") to be 100% sure that Qt finds the icon drawing.
import sys
import os
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
# Create a custom "QProxyStyle" to enlarge the QMenu icons
#-----------------------------------------------------------
class MyProxyStyle(QProxyStyle):
pass
def pixelMetric(self, QStyle_PixelMetric, option=None, widget=None):
if QStyle_PixelMetric == QStyle.PM_SmallIconSize:
return 40
else:
return QProxyStyle.pixelMetric(self, QStyle_PixelMetric, option, widget)
# This is the main window class (with a simple QMenu implemented)
# ------------------------------------------------------------------
class TestWindow(QMainWindow):
def __init__(self):
super(TestWindow, self).__init__()
# 1. Set basic geometry and color.
self.setGeometry(100, 100, 400, 400)
self.setWindowTitle('Hello World')
palette = QPalette()
palette.setColor(QPalette.Window, QColor(200, 200, 200))
self.setPalette(palette)
# 2. Create the central frame.
self.centralFrame = QFrame()
self.centralFrame.setFrameShape(QFrame.NoFrame)
self.setCentralWidget(self.centralFrame)
# 3. Create a menu bar.
myMenuBar = self.menuBar()
fileMenu = myMenuBar.addMenu("&File")
testMenuItem = QAction(QIcon("C:\\my\\path\\myFig.png"), "&Test", self)
testMenuItem.setStatusTip("Test for icon size")
testMenuItem.triggered.connect(lambda: print("Menu item has been clicked!"))
fileMenu.addAction(testMenuItem)
# 4. Show the window.
self.show()
# Start your Qt application based on the new style
#---------------------------------------------------
if __name__== '__main__':
app = QApplication(sys.argv)
myStyle = MyProxyStyle('Fusion') # The proxy style should be based on an existing style,
# like 'Windows', 'Motif', 'Plastique', 'Fusion', ...
app.setStyle(myStyle)
myGUI = TestWindow()
sys.exit(app.exec_())
You will see a window like this, with a huge icon:
So how did I solve it? Well, apparently you cannot increase the icon size of a QMenu item in the usual way - defining the size in the stylesheet. The only way to do it is to provide a new QStyle, preferably derived from an existing QStyle. I found sources on how to do that in C++ (see http://www.qtcentre.org/threads/21187-QMenu-always-displays-icons-aty-16x16-px), but no explanation for PyQt.
After long trials and errors, I got it working :-)
Apparently more people struggle with this situation: http://www.qtcentre.org/threads/61860-QMenu-Icon-Scale-in-PyQt