TextField vertical alignment problem



  • 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?

    0_1517446409785_Screen Shot 2018-01-31 at 4.52.45 PM.png



  • @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



  • 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?



  • @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
        }
    }
    


  • 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"
                }
            }
        }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.