TextField vertical alignment problem

[igor_stravinsky]

Qt QuickControls 2, version 5.10....

I' trying to use a TextField object. It's working fine, but I can't seem to set the vertical alignment of the text within the object so it's centered.

Here's the qml I'm using, and a snapshot of the result.

TextField{
        id:myTextFieldID
        font.family: "helvetica"
        font.pointSize: 12
        height:15
        width:30
}

I've tried setting the verticalAlignment of the TextField, but that didn't seem to have any effect. What's the secret to getting text to align with it's background?

[J.Hilk]

@igor_stravinsky

the default alignment is

verticalAlignment : enumeration

Sets the alignment of the text within the TextField item's height.

The possible alignment values are:

TextInput.AlignTop
TextInput.AlignBottom
TextInput.AlignVCenter (default).

My guess is, you don't give the Textfield a with or a height or anchors -> default position (0 0 of parent)
and contentwidth and contentheight as actual dimensions

[igor_stravinsky]

I tried to simplify things in my previous post, but I am anchoring the text field to the items around it, and I'm customizing the background:

TextField{
        id:myTextFieldID
        anchors.left:label.right
        anchors.leftMargin: 10
        anchors.verticalCenter: label.verticalCenter
        font.family: "helvetica"
        font.pointSize: 12
        height:15
        width:30
        background: Rectangle {
                implicitWidth: 15
                implicitHeight: 10
                color: "#838484"
                border.color: "#838484"
            }
    }

@J-Hilk I'm not sure what your suggestion is. I have to anchor the TextField to get it to align with the elements around it. Are you suggesting that TextFields shouldn't be anchored, and that height and width shouldn't be used?

[J.Hilk]

@igor_stravinsky
hi, I'm sorry your previous example is a bit lacking and I was assuming that the background Rectangle to be the Parent of the Textfield.

something like this:

Rectangle{
     id: myTextFieldIDBackground
     color: "#838484"
     border.color: "#838484"
     anchors.left:label.right
     anchors.leftMargin: 10
     anchors.verticalCenter: label.verticalCenter
     height:15
     width:30

    TextField{
        id:myTextFieldID
        anchors.fill: parent
        anchors.leftMargin 2

        verticalAlignment: Qt.AlignVCenter
        horizontalAlignment: Qt.AlignLeft
        
        font.family: "helvetica"
        font.pointSize: 12
    }
}

[igor_stravinsky]

Thanks for the code snippet, @J-Hilk !

Now I understand your strategy: don't use the TextField's background property, but put the TextField inside another rectangle. That's works much better. I still had to use the background property to eliminate a drawing artifact, but this code does what I wanted.

Rectangle{
         id: myTextFieldID
         color: "#838484"
         anchors.left:label.right
         anchors.leftMargin: 10
         anchors.verticalCenter: portCableCompensationText.verticalCenter
         height:15
         width:30

        TextField{
            id:myTextFieldID
            anchors.fill: parent
            anchors.leftMargin: 2
            anchors.topMargin: 5

            horizontalAlignment: Qt.AlignLeft

            font.family: "helvetica"
            font.pointSize: 12
            background: Rectangle {
                color:"transparent"
            }
        }
    }