Text not in the center of TextField, when creating a rounded TextField

AmrCoder

Hi,

Iam using the following code to create a rounded TextField

        TextField {
            id: usernameTextField
            placeholderText: qsTr("username")
            width: 250
            height: 40
            anchors {
                top: parent.top
                topMargin: giveDetailsLabel.anchors.topMargin + 36
                horizontalCenter: parent.horizontalCenter
                horizontalCenterOffset: 0
            }

            background: Rectangle {
                radius: 20
                border.color: "#C9C9C9"
                border.width: 1
            }
            verticalAlignment: TextField.AlignVCenter

            font.pixelSize: 16
            font.weight: Font.Normal
            font.family: "Open Sans"
            leftPadding: 10
        }

The problem with the following code, the text is not in the center it's shifted up for some reason and I try many different ways to put it in the center but never.

also, it looks very ugly when it deployed on Android

another question is I have the same exactly textfield but i used

echoMode: TextField.Password

to make the password, the password dots are so big, I try to decrease the font but the text also decrease before it convert to dot, so how to decrease the dot only without decrease the text size so user see what they are writting in big font before the character converts, here how it looks on Android

and also again the text shifted up and for dots for character and never center inside the text

flowery

I am not seeing any issue in your code .By default the vertical alignment in TextField is center only. Without this statement "verticalAlignment: TextField.AlignVCenter", it should work .
Did you check the same code output in Windows ?
Just make sure whether it is a problem with platform.

AmrCoder

yes I tested so far on Windows, Mac, IOS, Android, they all give the same you see them all shifted up like this, is that the normal look? what you think? also any idea about decrease the size of the password character the dot characters? as they look very bad on mobile phones very big in size.

flowery

I am not seeing this issue in Windows .My Qtversion is 5.12

AmrCoder

I tested with QT 5.15 and it worked good, the issues seems with Qt 6.2, anyway when I tried the

QQuickStyle::setStyle("Universal");

or Material it cause this issue, on old versions of QT, but on QT 6.2 it seems no matter what I does it still the same, you can change the style to Material or Universal you will get the same issue.

ndias

I was only able to reproduce the problem when using the theme material in conjunction with Qt6. When QT5 is used or the theme material is not used the problem does not happen.

You can check the bug report system to see if there's something related with. Maybe you can open a new ticket providing a description and a minimal script reproducing the issue.

I had already found other bugs before related to the theme material.

Regards

AmrCoder

Thank you very much for testing this, yes I think it's an issue, I even tested on QT Gallary example that comes with QT 6.2 and I added the rounded background and it give the same issue, but lower version this is not happen, I will report the Bug.