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

[robro]

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

[ODБOï]

@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

[robro]

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: