We Keep Coding

how to remove title bar only when it is not floated in QDockWidget

I want to hide title bar in dockwidget when it is not floated.
dock = QDockWidget()
dock.setTitleBarWidget(QWidget())
dock.titleBarWidget().hide()
this is hide the title bar of dockwidget
but when it is floated, It doesn't show title bar

You're aware, that when you hide the Title Bar of docked QDockWidget, it is not movable anymore, right?
The matter is not that simple. I ended up on stiching some events together:
I have Arrange (Edit) mode and View (normal) mode. In edit mode the Title bars are visible to allow drag&drop of the panels as requried. A toolbar button takes care of switching the modes. In your case you can asume View mode (arrange mode off) only.
When panel is undocked and form is not set to edit mode, undocked panel's title bar will be reset to None, resulting in showing the window borders, while the docked panels have hidden Title Bar.
When undocked panels gets docked, if the form is in view mode, the title bar is set to the widget itself, thus hiding it. topLevelChanged signal is used to trigger the check and change.
The result is that windows are arrangable in many ways, docked or undocked, with clean user experience. Note that while in the example you can set tabs closable, the close buttons are not handled in the example.
Here is fully functional test app:
from PyQt5 import QtCore, QtGui
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QWidget, QMainWindow, QTextEdit, QDockWidget, QToolBar, QTabWidget, QAction, QLayout, QTabBar
import PyQt5.QtWidgets
from PyQt5.QtGui import QIcon, QPixmap
#from PyQt5.QtCore import QMainWindow
_DOCK_OPTS = PyQt5.QtWidgets.QMainWindow.AllowNestedDocks
_DOCK_OPTS |= PyQt5.QtWidgets.QMainWindow.AllowTabbedDocks
class Window(QMainWindow):
def __init__(self):
QMainWindow.__init__(self)
self.setWindowTitle("Test")
tb = self.addToolBar("Test")
self.ShowTitleBars = False
secondQMainWindow = QMainWindow()
self.setTabPosition (Qt.LeftDockWidgetArea, QTabWidget.North)
self.central = secondQMainWindow
self.setDockOptions(_DOCK_OPTS)
self.dw1 = QDockWidget("One")
self.dw1.topLevelChanged.connect(self.HideTitleBar)
self.dw1.setTitleBarWidget(QWidget(self.dw1))
textArea = QTextEdit()
textArea.setText("Text area 1")
self.dw1.setWidget(textArea)
self.dw2 = QDockWidget("Two")
textArea2 = QTextEdit()
textArea2.setText("Text area 2")
self.dw2.setWidget(textArea2)
self.dw2.topLevelChanged.connect(self.HideTitleBar)
self.dw2.setTitleBarWidget(QWidget(self.dw2))
self.addDockWidget(Qt.LeftDockWidgetArea, self.dw1)
self.addDockWidget(Qt.RightDockWidgetArea, self.dw2)
self.tabifyDockWidget(self.dw1, self.dw2)
self.dw3 = QDockWidget("Three")
self.dw3.topLevelChanged.connect(self.HideTitleBar)
self.dw3.setTitleBarWidget(QWidget(self.dw3))
textArea3 = QTextEdit()
textArea3.setText("Text area 3")
self.dw3.setWidget(textArea3)
self.addDockWidget(Qt.LeftDockWidgetArea, self.dw3)
barOn = QAction("Tabs closable",self)
barOn.triggered.connect(self.CountTabWidgetsInTopWindow)
tb.addAction(barOn)
barOff = QAction("Anotherbar",self)
#barOff.triggered.connect(self.ToogleTwo)
tb.addAction(barOff)
barTog = QAction("Toggle Title Bars",self)
barTog.setCheckable(True)
barTog.triggered.connect(self.ToogleTitles2)
tb.addAction(barTog)
def ToogleTwo(self):
self.dw1.setTitleBarWidget(QWidget(self.dw1))
self.dw2.setTitleBarWidget(QWidget(self.dw2))
self.dw3.setTitleBarWidget(QWidget(self.dw3))
print("Test OFF")
def ToogleTitles(self):
#self.dw1.setTitleBarWidget(self.dw1)
self.dw1.setTitleBarWidget(None)
self.dw2.setTitleBarWidget(None)
self.dw3.setTitleBarWidget(None)
print("Test ON")
def SetTabsClosable(self):
for widget in self.children():
if isinstance(widget, QTabBar):
widget.setTabsClosable(True)
def CountTabWidgetsInTopWindow(self):
for widget in self.children():
if isinstance(widget, QTabBar):
widget.setTabsClosable(True)
else:
print("QTabWidget " + widget.objectName() + " -- " + widget.__class__.__name__)
print("Counted.")
def HideTitleBar(self):
dockw = self.sender()
if dockw.isFloating() == False and self.ShowTitleBars == False:
dockw.setTitleBarWidget(QWidget(dockw))
def ToogleTitles2(self):
if self.ShowTitleBars == True:
self.ShowTitleBars = False
else:
self.ShowTitleBars = True
for widget in self.children():
if isinstance(widget, QDockWidget):
if widget.titleBarWidget() == None and self.ShowTitleBars == False:
if widget.isFloating() == False:
widget.setTitleBarWidget(QWidget(widget))
else:
widget.setTitleBarWidget(None)
print("Test Toggle")
if __name__ == '__main__':
import sys
app = PyQt5.QtWidgets.QApplication(sys.argv)
window = Window()
window.show()
app.exec_()

in qt C++, but i think it is the same in py:
Initially a floating window will have the following flags:
QFlags<Qt::WindowType>(Tool|X11BypassWindowManagerHint|WindowTitleHint|WindowSystemMenuHint|CustomizeWindowHint|WindowCloseButtonHint)
You will need to set the Qt::CustomizeWindowH and remove the other flags on the dock widget.
Then:
You need to set the flags Qt:Tool and respectively the Qt:FramelessWindowHint (depending on the system visu you use - need also the X11 flag to set)
QFlags<Qt::WindowType>(Tool|X11BypassWindowManagerHint|FramelessWindowHint)
Setting the flag will need to be done using the method setWindowFlags:https://doc.qt.io/qt-5/qwidget.html#windowFlags-prop
Additionally there is another method: setWindowFlag(flag,bool):https://doc.qt.io/qt-5/qwidget.html#setWindowFlag

How to put a table at the center of the window (Set table position)

So, I'm working on an application and I'm using QTableWidget to generate a table. I want to put the table at the center of the window but I can't find a way to do this, it takes way too much space and its stucked at the top left of the window. I'm putting the table and a button in a QVBoxLayout, there's some blank space after the table (at the bottom and the right) and then the button, far away from the table.
Thats how its looking like
And thats how i want it to be
Right now my code is like this:
from PyQt5.QtWidgets import QHeaderView, QPushButton, QMainWindow, QApplication, QMenuBar, QAction, QFileDialog, QWidget, QTableView, QVBoxLayout, QHBoxLayout, QTableWidget, QTableWidgetItem
from PyQt5.QtCore import QAbstractTableModel, Qt
from PyQt5 import QtGui
import sys
class MyApp(QMainWindow):
def __init__(self):
super().__init__()
self.createWindow()
self.show()
def createWindow(self):
self.setWindowTitle('Pós Graduação')
self.setWindowIcon(QtGui.QIcon('icon.ico'))
self.setGeometry(300, 100, 700, 600)
self.table_widget = TableWidget(self)
self.setCentralWidget(self.table_widget)
class TableWidget(QWidget):
def __init__(self, parent):
super(TableWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
self.creatingTable(parent)
#self.setLayout(self.layout)
def creatingTable(self, parent):
tableWidget = QTableWidget()
tableWidget.setRowCount(6)
tableWidget.setColumnCount(4)
tableWidget.horizontalHeader().setVisible(False)
tableWidget.verticalHeader().setVisible(False)
header = tableWidget.horizontalHeader()
header.setSectionResizeMode(2, QHeaderView.ResizeToContents)
header.setSectionResizeMode(3, QHeaderView.ResizeToContents)
self.layout.addWidget(tableWidget)
self.button1 = QPushButton("Button 1")
self.layout.addWidget(self.button1)
self.setLayout(self.layout)
if __name__ == '__main__':
App = QApplication(sys.argv)
App.setStyle('Fusion')
window = MyApp()
sys.exit(App.exec())

An item view has a default size "hint" for Qt, which is the size that the widget suggests as the best to show its contents and make it as usable as possible. Also, each widget has a sizePolicy property, which tells how the widget behaves when it's part of a layout (should it shrink, grow, have a fixed size, etc).
Item views like QTableWidget (and its ancestor, QTableView) don't explicitly expose their contents, and that's for obvious reasons: a table could have thousands of rows and columns, and the layout shouldn't really care about them.
To be able to resize the table to its contents, the table has to cycle through all of them, and to do so it's better to do it whenever the contents change their sizes. The best approach is probably to connect to the signals the model and header provide, and set a fixed size each time they are fired, which is something that is better done with subclassing.
class TableWidgetSubclass(QTableWidget):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# update the size each time columns or rows are changed
self.model().columnsInserted.connect(self.updateSize)
self.model().columnsRemoved.connect(self.updateSize)
self.model().rowsInserted.connect(self.updateSize)
self.model().rowsRemoved.connect(self.updateSize)
# the same, when a section is resized; note that Qt requires some "time"
# to do so, so the call to the update function has to be delayed
self.horizontalHeader().sectionResized.connect(lambda: QTimer.singleShot(0, self.updateSize))
self.verticalHeader().sectionResized.connect(lambda: QTimer.singleShot(0, self.updateSize))
# ensure that the widget uses only the maximum required size
self.setSizePolicy(QSizePolicy.Maximum, QSizePolicy.Maximum)
# and disable the scrollbars
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
def updateSize(self):
width = 0
header = self.horizontalHeader()
# go through each column and add its size
for s in range(self.model().columnCount()):
width += header.sectionSize(s)
height = 0
header = self.verticalHeader()
# the same for rows
for s in range(self.model().rowCount()):
height += header.sectionSize(s)
size = QSize(width, height)
# since we've connected a lot of signals and the model could still
# be empty when calling this slot, ensure that the size is valid
if size.isValid():
self.setFixedSize(size)
Finally, when adding a widget to a layout, it usually uses as much space as possible. If it doesn't, it's aligned according to the default top-left. To avoid that, add the widget by specifying the alignment:
class TableWidget(QWidget):
def __init__(self, parent):
super(TableWidget, self).__init__(parent)
QVBoxLayout(self)
self.creatingTable(parent)
def creatingTable(self, parent):
tableWidget = TableWidgetSubclass()
# ...
self.layout().addWidget(tableWidget, alignment=Qt.AlignCenter)
self.button1 = QPushButton("Button 1")
self.layout().addWidget(self.button1, alignment=Qt.AlignCenter)
Note: as you can see, I didn't use self.layout =, and then I used self.layout(). That's for two reasons:
you should never overwrite basic class attributes (layout is a property of every QWidget)
when adding the target attribute to a layout constructor, that layout is automatically applied to the widget, and there's no need to use setLayout again, since it has already implicitly called.

Layout in QWidget makes background white when adding a stretch

Im using PyQt5 and it's styling system to create a modern looking GUI for my application and i can't seem to get this right.
So i've got a costum titlebar all working. It has 3 parts; a menubar, a label and another menubar that serves as the titlebar buttons for closing, min- and maximizing.
I need this titlebar to be a light grey color, but as you can see in the image below, there is white space between the elements.
What it is now:
What is should be:
When you run the example below, you can see that between the labels there is some empty space. Even though the labels are inside a box without styling, the styling is set on the widget.
#### PyQt imports....
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import (QWidget, QHBoxLayout, QMenuBar, QApplication,
QLabel, QVBoxLayout)
#### Python imports....
import sys
#### Class for sampleWindow....
class sampleWindow(QWidget):
def __init__(self):
super().__init__()
#### Some window settings....
self.setWindowTitle('Sample Program')
self.setGeometry(400, 300, 1000, 500)
######## THE SAME PROBLEM BUT THIS TIME NOT IN A QMENUBAR ########
#### Creating the widget and it's layout....
parentLayout = QHBoxLayout()
parentWidget = QWidget()
#### Creating the elements....
sampleLabelLeft = QLabel('left')
sampleLabelCenter = QLabel('center')
sampleLabelRight = QLabel('right')
#### Setting alignment for the elements....
sampleLabelLeft.setAlignment(Qt.AlignLeft)
sampleLabelCenter.setAlignment(Qt.AlignCenter)
sampleLabelRight.setAlignment(Qt.AlignRight)
#### Adding the elements to the parentLayout....
parentLayout.addWidget(sampleLabelLeft)
parentLayout.addWidget(sampleLabelCenter)
parentLayout.addWidget(sampleLabelRight)
#### Setting parentLayout as layout for parentWidget....
parentWidget.setLayout(parentLayout)
#### Set styling for elements....
self.setStyleSheet('QWidget{background:blue;} QLabel{background:red;}')
#### Setting some a box to put parentWidget in so it can be set as the main layout....
mainBox = QVBoxLayout()
mainBox.addStretch()
mainBox.addWidget(parentWidget)
mainBox.addStretch()
mainBox.setContentsMargins(200,200,200,200)
self.setLayout(mainBox)
app = QApplication(sys.argv)
sampleWindow = sampleWindow()
sampleWindow.show()
app.exec()
So after this i set the background color of the QWidget to a bit of a light grey and the stretches are ignored.
Does anyone know a workaround for this?

By default the layout has a style-dependent spacing, so the solution for your case is to set it to 0:
# ...
parentLayout = QHBoxLayout()
parentLayout.setSpacing(0)
# ...

I found that setting a background widget solved the problem:
parentWidget = QWidget()
label_background = QLabel(parentWidget)
label_background.setFixedSize(1920, 1080)

How does stretch factor work in Qt?

I'm working on a GUI application with pyqt5. At a certain dialog I need many components, being one of those a QWebEngineView as a canvas for plotting data, which should take most of the space available even if the chart is not ready when creating the dialog.
I expect it to look something like this:
I investigated and found about the stretch factor. I saw that QSizePolicy is directly applicable only to widgets and not to layouts, as shown in this SO answer. But then I saw that the methods addWidget and addLayout allow me to set the stretch factor in the direction of the QBoxLayout, and that seemed ideal for my intentions.
So I tried with:
from PyQt5.QtWidgets import QWidget, QLabel, QVBoxLayout, QHBoxLayout
from strategy_table import StrategyTable
layout = QVBoxLayout()
layout.addWidget(QLabel("Strategy components"))
# Upper layout for a table. Using a 30% of vertical space
upper_layout = QHBoxLayout() # I'm using a HBox because I also want a small button at the right side of the table
self.table = StrategyTable(self) # Own class derived from QTableWidget
upper_layout.addWidget(self.table)
add_button = QPushButton('Add')
add_button.clicked.connect(self._show_add_dialog)
upper_layout.addWidget(add_button)
layout.addLayout(upper_layout, 3) # Setting 20% of size with the stretch factor
# Then the plot area, using 60% of vertical space
layout.addWidget(QLabel("Plot area"))
canvas = QWebEngineView()
layout.addWidget(self.canvas, 6)
# Finally, a small are of 10% of vertical size to show numerical results
layout.addWidget(QLabel("Results"))
params_layout = self._create_results_labels() # A column with several QLabel-QTextArea pairs, returned as a QHBoxLayout
layout.addLayout(params_layout, 1)
self.setLayout(layout)
But it looked exactly the same as before:
It looked quite ok before adding the results Layout at the bottom, I guess because the upper table is empty at the beginning, and therefore took very little space and left the rest to the canvas.
Anyway, it seems that the stretch factor is being ignored, so I don't know if I am missing something here, or that I didn't fully understand the stretch factor.
BTW, I know I would use the QtEditor for designing the GUI, but I kind of prefer doing these things manually.

The problem is simple, the layouts handle the position and size of the widgets, but it has limits, among them the minimum size of the widgets, and in your case the last element has a height higher than 10%, so physically it is impossible. We can see that by removing the content or using a QScrollArea:
import sys
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets
class StrategyTable(QtWidgets.QTableWidget):
pass
class Widget(QtWidgets.QWidget):
def __init__(self, parent=None):
super(Widget, self).__init__(parent)
lay = QtWidgets.QVBoxLayout(self)
table = StrategyTable()
button = QtWidgets.QPushButton("Add")
hlay = QtWidgets.QHBoxLayout()
hlay.addWidget(table)
hlay.addWidget(button)
canvas = QtWebEngineWidgets.QWebEngineView()
canvas.setUrl(QtCore.QUrl("http://www.google.com/"))
scroll = QtWidgets.QScrollArea()
content_widget = QtWidgets.QWidget()
scroll.setWidgetResizable(True)
scroll.setWidget(content_widget)
vlay = QtWidgets.QVBoxLayout()
vlay.addWidget(QtWidgets.QLabel("Results:"))
params_layout = self._create_results_labels()
content_widget.setLayout(params_layout)
vlay.addWidget(scroll)
lay.addLayout(hlay, 3)
lay.addWidget(canvas, 6)
lay.addLayout(vlay, 1)
def _create_results_labels(self):
flay = QtWidgets.QFormLayout()
for text in ("Delta", "Gamma", "Rho", "Theta", "Vega"):
flay.addRow(text, QtWidgets.QTextEdit())
return flay
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_())

Hope this will be useful to understand Layouts along with stretch factor
Sample Layout based on percentages (CPP)
QVBoxLayout *topMostVerticalLayout = new QVBoxLayout(this);
QHBoxLayout *upperHorznLayout = new QHBoxLayout();
QHBoxLayout *bottomHorznLayout = new QHBoxLayout();
QVBoxLayout *InnerVerticalLayout1 = new QVBoxLayout(this);
QVBoxLayout *InnerVerticalLayout2 = new QVBoxLayout(this);
QVBoxLayout *InnerVerticalLayout3 = new QVBoxLayout(this);
QVBoxLayout *InnerVerticalLayout4 = new QVBoxLayout(this);
QVBoxLayout *InnerVerticalLayout5 = new QVBoxLayout(this);
bottomHorznLayout->addLayout(InnerVerticalLayout1,15); //(15% stretch)
bottomHorznLayout->addLayout(InnerVerticalLayout2,15); //(15% stretch)
bottomHorznLayout->addLayout(InnerVerticalLayout3,15); //(15% stretch)
bottomHorznLayout->addLayout(InnerVerticalLayout4,15); //(15% stretch)
bottomHorznLayout->addLayout(InnerVerticalLayout5,40); //(40% stretch)
topMostVerticalLayout->addLayout(upperHorznLayout,3); //(30% stretch)
topMostVerticalLayout->addLayout(bottomHorznLayout,7); //(70% stretch)
this->setLayout(topMostVerticalLayout);

How to remove spacing inside a gridLayout (QT)?

I want to create a child container layout which will contains 2 widgets. Those 2 widgets should be placed right next to each other but my current setup still has some spacing in between.
I have already set the spacing to 0 setSpacing(0). And setContentsMargins(0,0,0,0) doesn't helped.
I am using PyQt5 but it shouldn't be a problem converting c++ code.
As you can see in the picture there is still a small gap:
(Left: LineEdit - Right: PushButton)
import PyQt5.QtCore as qc
import PyQt5.QtGui as qg
import PyQt5.QtWidgets as qw
import sys
class Window(qw.QWidget):
def __init__(self):
qw.QWidget.__init__(self)
self.initUI()
def initUI(self):
gridLayout = qw.QGridLayout()
height = 20
self.label1 = qw.QLabel("Input:")
self.label1.setFixedHeight(height)
gridLayout.addWidget(self.label1, 0, 0)
# Child Container
childGridLayout = qw.QGridLayout()
childGridLayout.setContentsMargins(0,0,0,0)
childGridLayout.setHorizontalSpacing(0)
self.lineEdit1 = qw.QLineEdit()
self.lineEdit1.setFixedSize(25, height)
childGridLayout.addWidget(self.lineEdit1, 0, 0)
self.pushButton1 = qw.QPushButton("T")
self.pushButton1.setFixedSize(20, height)
childGridLayout.addWidget(self.pushButton1, 0, 1)
# -----------------
gridLayout.addItem(childGridLayout, 0,1)
self.setLayout(gridLayout)
if __name__ == '__main__':
app = qw.QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec_())

The QT documentation says:
By default, QLayout uses the values provided by the style. On most platforms, the margin is 11 pixels in all directions.
Ref:http://doc.qt.io/qt-4.8/qlayout.html#setContentsMargins
So you may need to use "setHorizontalSpacing(int spacing)" for horizontal space and "setVerticalSpacing(int spacing)" for vertical.
Based on the documentation, this may delete space in your case.
Ref:http://doc.qt.io/qt-4.8/qgridlayout.html#horizontalSpacing-prop
If not resolved, there is an option to override style settings for space (from where the layout gets).... I think this is tedious
If you want to provide custom layout spacings in a QStyle subclass, implement a slot called layoutSpacingImplementation() in your subclass.
More detials:
http://doc.qt.io/qt-4.8/qstyle.html#layoutSpacingImplementation