Change the space between TextField line and text

Amanda0211

I am using Material Design and I want to change the distance between the line and the text of a TextField.

Is there any property inside the TextField that can change that?

Markkyboy

TelField?

Anyway, without seeing your code, it was not too easy to workout where that lower line is coming from, I'm fairly certain it is not part of TextField or TextInput, but I could be wrong.

However, I can reproduce something similar and a simply declaration of implicit height set on background item allows vertical adjustment between characters and lower line.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true
    color: "black"
    title: qsTr("Hello World")

    TextField {
        color: "white"
        text: "5000"
        font.pixelSize: 36
        anchors.centerIn: parent
        background: Item {
            implicitWidth: 200
            implicitHeight: 180 // reduce this figure and see line height decrease
            Rectangle {
                color: "white"
                height: 3
                width: parent.width
                anchors.bottom: parent.bottom
            }
        }
    }
}

GrecKo

@Markkyboy said in Change the space btween TelField line and TextField Text:

TelField?

Context..

Anyway, OP is using the Material style TextField, this one has a line.
It's position is calcluated by default like this : y: textField.height - height - textField.bottomPadding + 8
The 8 is the distance between the line and the text. To increase it you can modify the y of the background:

TextField {
    background.y: height - background.height - bottomPadding + 12
}

You might need to change the bottomPadding value if you want to keep a distance between the line and the bottom of the TextField (by default the bottomPadding is 16).

Amanda0211

@GrecKo thank you! That is what I was looking for!