Adding border with stylesheet changes QLineEdit default size

[JesusM97]

Hello, I am adding a red border to a QLineEdit if a field is mandatory and empty but, when I apply the stylesheet, the default size of the QLineEdit changes. How can I keep the default size?

This is the stylesheet code:

border-style: solid;border-width: 2px;border-color: red

This is the default QLineEdit size:

And this is the styled one:

I am using PySide2, thanks!

[jsulm]

@JesusM97 Do you use layouts?

[JesusM97]

@jsulm yes, all the fields are inside layouts

[SGaist]

Hi,

Which layout are you using ?

[ndias]

Hi @JesusM97 ,
Can you share a code snippet illustrating the issue?
Regards

[JesusM97]

@SGaist I am using QVBoxLayout and QHBoxLayout
Here it is a look before applying stylesheet:

and after:

[JesusM97]

@ndias of course, for example, I have this setup:

        layout = QVBoxLayout()

        hlayout = QHBoxLayout()
        self.trialNameLabel = QLabel("Nombre del ensayo")
        self.trialNameLabel.setToolTip("Nombre con el que quieres identificar el ensayo")
        self.trialNameInput = QLineEdit()
        self.trialNameInput.textChanged.connect(self.trialNameInputChanged)

        self.trialIdLabel = QLabel("ID del ensayo")
        self.trialIdLabel.setToolTip("Identificador del ensayo")
        self.trialIdInput = QLineEdit()

        hlayout.addWidget(self.trialNameLabel)
        hlayout.addWidget(self.trialNameInput)
        hlayout.addWidget(self.trialIdLabel)
        hlayout.addWidget(self.trialIdInput)
        hlayout.setAlignment(self.trialNameLabel, Qt.AlignRight)
        hlayout.setAlignment(self.trialNameInput, Qt.AlignLeft)
        hlayout.setAlignment(self.trialIdLabel, Qt.AlignRight)
        hlayout.setAlignment(self.trialIdInput, Qt.AlignLeft)
        hlayout.setContentsMargins(0, 0, 0, 5)
        layout.addLayout(hlayout)
        self.setLayout(layout)

This code represents this row:

At the end of the window I have an OK button. When this button is clicked I check if all the mandatory fields are filled and, if not, I change their stylesheets:

 if not self.trialNameInput.text():
            self.trialNameInput.setStyleSheet("border-style: solid;border-width: 2px;border-color: red")

[SGaist]

I would suggest QFormLayout

[JesusM97]

@SGaist Do you mean QFormLayout inside QHBoxLayout ir order to have multiple rows? As far as I know QFormLayout only allows to place fields vertically within the layout.

[SGaist]

That's that, one QFormLayout for the left "colum" of fields and one for the right and finally both inside the QHBoxLayout.

[JoeCFD]

@SGaist Is not GridLayout simpler? And set a minimum width for the qlineedits which can be referenced with font size.

[SGaist]

For that kind of input, QFormLayout does the job just fine.

[JesusM97]

@SGaist I will try that, thanks!

[JesusM97]

@SGaist I tried with QFormLayout and I have same problem.
I found that with QFormLayout the problem appears when I add this line of code:

formLayout.setFieldGrowthPolicy(QFormLayout.FieldsStayAtSizeHint)

but I don't want the fields to grow so I need that line.

[SGaist]

Can you provide a complete minimal script that shows that behaviour ?

[JesusM97]

@SGaist Of course. I created a QMainWindow with a QLineEdit and a QPushButton. When I press the button, there is a function that checks if the QLineEdit is empty. If it is empty it changes its border to red but it also changes the field size:

import sys

from PySide2 import QtWidgets
from PySide2.QtCore import Qt
from PySide2.QtWidgets import QMainWindow, QFormLayout, QLineEdit, QWidget, QVBoxLayout, QPushButton

def checkEmpty(lineEdit):
    if lineEdit.text() == "":
        lineEdit.setStyleSheet("border-style: solid;border-width: 2px;border-color: red")


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)

    main_window = QMainWindow()
    centalWidget = QWidget()
    main_window.setCentralWidget(centalWidget)

    verticalLayout = QVBoxLayout()
    formLayout = QFormLayout()
    inputEdit = QLineEdit()
    formLayout.addRow("Input", inputEdit)
    formLayout.setRowWrapPolicy(QFormLayout.DontWrapRows)
    formLayout.setFieldGrowthPolicy(QFormLayout.FieldsStayAtSizeHint)
    formLayout.setFormAlignment(Qt.AlignHCenter | Qt.AlignTop)
    verticalLayout.addLayout(formLayout)

    okButton = QPushButton("OK")
    okButton.clicked.connect(lambda: checkEmpty(inputEdit))
    verticalLayout.addWidget(okButton)

    centalWidget.setLayout(verticalLayout)

    main_window.show()

    app.exec_()

When I run the app this is what it shows:

and when I click the button this is what happens:

This doesn't happen if I remove:

formLayout.setFieldGrowthPolicy(QFormLayout.FieldsStayAtSizeHint)

but I need it

[SGaist]

Can you test that with PySide6 ?
I tried it on macOS and the QLineEdit just changed the border without the changing it size with the sample script you posted.

[JesusM97]

@SGaist Really? I tried the example with PySide6 and I have the same result. Did you add

formLayout.setFieldGrowthPolicy(QFormLayout.FieldsStayAtSizeHint)

to your form layout? If not it doesn't happen.

[SGaist]

Which version of PySide6 do you have ?

[JesusM97]

@SGaist PySide6 6.3.1