Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to control the width and the vertical alignment of a TextField in a GridLayout?



  • Hello,

    I am using a GridLayout together with a “Text” and a “TextField”.
    There I have two open questions.

    First the width of the TextField appears to be constant.
    If I try to set a width with "width:" nothing happens.
    How can I decrease the width of a TextField respectively the column width to compress the width of the TextField?

    Second the text of the “Text” and the text from the “TextField“ are not aligned vertically because of the accent line under the TextField.
    How can I align both texts?

    Thank you very much!

    Example code:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Material 2.2
    
    ApplicationWindow {
        id: root
        width: 400
        height: 400
        visible: true
    
        GridLayout {
            anchors.centerIn: parent
            id: grid
            columns: 2
    
            Text {
                id: text1
                text: qsTr("Test:")
            }
    
            TextField {
                id: textField1
                width: 50 //Not working!
                text: qsTr("1")
            }
    
    
            Text {
                id: text2
                text: qsTr("Test2:")
            }
    
            TextField {
                id: textField2
                width: 50
                text: qsTr("1")
            }
        }
    }
    
    


  • @robro hi,
    @robro said in How to control the width and the vertical alignment of a TextField in a GridLayout?:

    If I try to set a width with "width:" nothing happens.

    Layouts : http://doc.qt.io/Qt-5/qtquick-usecase-layouts.html#layout-types

       TextField {
                    id: textField1
                  //  width: parent.width/3 //Not working!
                    Layout.preferredWidth: parent.width/3
                    text: qsTr("1")
                }
    

    @robro said in How to control the width and the vertical alignment of a TextField in a GridLayout?:

    Second the text of the “Text” and the text from the “TextField“ are not aligned vertically because of the accent line under the TextField.

    Are you sure ? in my case they are. You can still take a look at : http://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#alignment-attached-prop



  • Thank you very much!
    I did not know about layouts before and it worked :-)

    I also tried to fix the alignment of the text.
    Here I tried several of the "alignment-attached-probs".

    With "Layout.alignment: Qt.AlignTop" I can allign the Text, but not the TextField.
    So I would need to do something like "Layout.alignment: Qt.AlignTop -3" but this is not working.
    Here you can see that text and numbers are not aligned:

    0_1531985845501_problem.JPG


Log in to reply