Qt: How to make custom widget that aligns like QTextField

Question

I am trying to make a DirectoryEditWidget, i.e. a widget similar to a QLineEdit widget, but with a browse-button to allow the user to browse the file system for the directory. The functionality is working in the implementation below, but I would like a solution that will snap into a QFormLayout and line up nicely with everything else.

class FileEditWidget(QtWidgets.QWidget):
    """
    A textfield with a browse button.

    """
    def __init__(self, parent=None):
        super().__init__(parent)

        layout = QtWidgets.QHBoxLayout()
        self.file_line_edit = QtWidgets.QLineEdit()
        layout.addWidget(self.file_line_edit, stretch=1)
        browse_button = QtWidgets.QPushButton("...")
        layout.addWidget(browse_button)
        self.setLayout(layout)

        browse_button.clicked.connect(self.browse)

    def browse(self, msg = None, start_path = None):
        directory = QtWidgets.QFileDialog.getExistingDirectory(self,
            msg or "Find files", start_path or QtCore.QDir.currentPath())
        if directory:
            self.file_line_edit.setText(directory)

I suspect, I will have to modify the layout properties of the parent QWidget object or the layout -- but I don't have much of an idea where to start?

In the screenshot below, I have included my custom widget like so:

def create_form_group(self):
    form_group_box = QtWidgets.QGroupBox("Central widget with form layout")
    layout = QtWidgets.QFormLayout()
    layout.addRow(QLabel("Name of stuff"), QtWidgets.QLineEdit())
    layout.addRow(QLabel("Folder name"), FileEditWidget())
    layout.addRow(QLabel("Some selection"), QtWidgets.QComboBox())

All widgets have customisable content margins on each side. Top, bottom, left and right. They have some small value by default which is why you see a slight indent on all sides on your FileEditWidget. Make a call to the python equivilent of setContentsMargins( leftMargin, topMargin, rightMargin, bottomMargin ) on your FileEditWidget, replacing in the values you want (try 0 for the left and right margins) and it should align properly. Also note that all Qt layouts have the exact same concept, though I don't believe they have any margins set by default. — aatwo, Jun 27 '17 at 16:23
My mistake it is the layouts that have the default margins, not the widgets :) The answer below points it out excellently. — aatwo, Jun 27 '17 at 16:35

eyllanesc · Accepted Answer · 2017-06-27T16:32:58.210

The problem is caused by the margins of the layout.

According to the documentation:

By default, QLayout uses the values provided by the style. On most platforms, the margin is 11 pixels in all directions.

In the following image I show these margins:

To remove them use this in FileEditWidget.

class FileEditWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        [...]
        layout = QtWidgets.QHBoxLayout()
        layout.setContentsMargins(0, 0, 0, 0)

Qt: How to make custom widget that aligns like QTextField

1 Answers1