Padding in text field with Text.AlignHCenter

Imynn

Hello! I have a weird behavior in text field. When the text is longer than the field, and when it's HCenter aligned, padding on the right side appears. Example of code that gives me this problem:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        width: 100
        height: 50
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            TextField {
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                selectByMouse: true
                focus: true
                text: "fwqfwqfwqfqwfqwfwqfqwqfwqfwfqwqfwqfwfwqffwqfqwfqwf"
            }
        }
    }
}

Maybe I am doing something wrong, or it's a qt bug (5.15.2)? I would like to know if there's a workaround for it. For example if I align text to the left, it will be okay and there will be no padding or if I remove Item/ColumnLayout it will be fine too. Help please:)

JoeCFD

Just tested it. It aligned to the left.

But set the width property. horizontalAlignment doesn't usually work without it. Now the following code works for both

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        width: 100
        height: 50
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            TextField {
                //anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                selectByMouse: true
                width : 100
                focus: true
                text: "fwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwq"
               // text: "fwq"
            }
        }
    }
}

JoeCFD

@Imynn said in Padding in text field with Text.AlignHCenter:

horizontalAlignment: Text.AlignHCenter

horizontalAlignment: Text.AlignCenter seems ok.

Imynn

@JoeCFD
Thank you for the advice, but unfortunately with suggested change the text seems to be aligned to the left, instead of center:( I need short text to be aligned to the center and long text to be without that padding.

JoeCFD

I tested your code with qmlscene and horizontalAlignment: Text.AlignCenter makes the text in the center. My Qt version 5.15.2 and OS is Ubuntu 18.04.

Imynn

@JoeCFD
That's weird actually, because I'm using Qt 5.15.2 too, but im on windows 10 and the compiler i'm using is MSVC2019
here is the example how it looks like:

JoeCFD

@JoeCFD said in Padding in text field with Text.AlignHCenter:

qmlscene

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        width: 100
        height: 50
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            TextField {
                anchors.fill: parent
                horizontalAlignment: Text.AlignCenter
                selectByMouse: true
                focus: true
                text: "fwqfwqfwqfqwfqwfwqfqwqfwqfwfqwqfwqfwfwqffwqfqwfqwf"
            }
        }
    }

Imynn

@JoeCFD with long text it works well, but what if the text will be short? Like 3 characters, will it be aligned to the center? Cuz when I try shorted text it's aligned to the left* :(

JoeCFD

Just tested it. It aligned to the left.

But set the width property. horizontalAlignment doesn't usually work without it. Now the following code works for both

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        width: 100
        height: 50
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            TextField {
                //anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                selectByMouse: true
                width : 100
                focus: true
                text: "fwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwqfwq"
               // text: "fwq"
            }
        }
    }
}