TextField vertical alignment problem

pderocco

I have a TextField inside a parent Rectangle, with its height and width bound to its parent. Both of these are resized as my main window is resized. When it gets small, the text wanders vertically by a few pixels, and is also clipped to an area smaller than the rectangle. I've added onHeightChanged and other handlers, logging the results to the console, and the numbers look fine. Furthermore, there's no fixed relation between the wandering and the heights. Here are two screen snips, which show the TextField at exactly the same size, but with the text in two different positions.

The pale yellow shows the Rectangle; the black is the larger background it's on. The overall window size had been changed a smidge between these two snips, and the real number that the Rectangle height was set to probably had a different fractional part, but the Rectangle height always reads back as an int, so I don't see how that could propagate to the TextField.

One more thing: setting verticalAlignment to any of the three choices doesn't seem to have any effect at these sizes, and only a slight effect at much larger sizes, certainly not the same effect as you normally get with a simple Text object.

Has anyone seen this behavior, and found a fix?

dheerendra

If you can give us the sample program with this issue, Qt Version , platform etc, we can help you see the issue & suggest.

pderocco

@dheerendra Sorry, I'm running Windows 7 32-bit, using MSVC 32-bit. Here's a simple program.

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

Window {
    visible:            true
    width:              640
    height:             480
    title:              "TestTextField"
    
    Rectangle {
        anchors.fill:       parent
        color:              "black"

        Rectangle {
            anchors.centerIn:   parent
            height:             parent.height * 0.05
            width:              parent.width * 0.2
            color:              "white"

            TextField {
                width:              parent.width
                height:             parent.height
                font.pixelSize:     0.5 * height
                background:         Item {}
                text:               "Hi, Mom!"
                }
            }
        }
    }

Slooowly drag the window height smaller and watch the text in the field as it jumps up and down, and is clipped as though there were a white border inside the field.

dheerendra

You are changing the height & width of parent rectangle. Also you you are changing pixel size based on the height & parent. TextField should have minimum width and height to ensure that your text is displayed properly. You should adjust the parent rectangle size based on this. Also use the anchors.centerIn: parent for textField.

pderocco

@dheerendra This program has a "top down" layout, where everything is based on fractions of the window height and width so that everything has the same relative size regardless of the resolution or overall size. This works perfectly with ordinary Text objects. Here's a version that shows the difference:

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

Window {
    visible:            true
    width:              640
    height:             480
    title:              "TestTextField"
    
    Rectangle {
        anchors.fill:       parent
        color:              "black"
        
        Rectangle {
            anchors.centerIn:   parent
            anchors.horizontalCenterOffset: -parent.width * 0.12
            height:             parent.height * 0.05
            width:              parent.width * 0.2
            color:              "white"

            TextField {
                width:              parent.width
                height:             parent.height
                font.pixelSize:     0.5 * height
                background:         Item {}
                text:               "Hi, Mom!"
                }
            }
        
        Rectangle {
            anchors.centerIn:   parent
            anchors.horizontalCenterOffset: parent.width * 0.12
            height:             parent.height * 0.05
            width:              parent.width * 0.2
            color:              "white"

            Text {
                anchors.fill:       parent
                anchors.leftMargin: 10
                anchors.rightMargin: 10
                anchors.topMargin:  6
                anchors.bottomMargin: 6
                clip:               true
                font.pixelSize:     0.5 * parent.height
                verticalAlignment:  Text.AlignVCenter
                text:               "Hi, Mom!"
                }
            }
        }
    }

First of all, the TextField has some automatic indenting and clipping, which I've duplicated in the Text with some margins, and enabling clipping. This suggests that the TextField does that internally. I tried setting clip to false in the TextField, but it did nothing.

Second, I notice that when I gradually reduce the size, the TextField contents don't jump around, but when I gradually increase the size, the TextField contents exhibit the jumping problem.

This is really peculiar, and it frankly makes this control unusable at the low resolutions I need to support. I'd like to find a way around this. I wonder if this is controlled by some inherited property, but when I go to the "List of all members, including inherited members" in the documentation, it just gives me a copy of the list of the immediate members. That's a bug in the docs. If I look at the properties of FocusScope, which it's derived from, I see a big long list, but nothing that looks obviously related, and I don't know what defaults might be overridden by TextField.

Shrinidhi Upadhyaya

Hi @pderocco , the issue with clipping of text is that by Default TextField has a padding value,
These are the default values:-
TopPadding- 6
BottomPadding- 6
LeftPaddding- 10
RightPadding- 6
you can set the padding values to 0, to avoid the clipping.

For example:-

TextField {
width: parent.width
height: parent.height
font.pixelSize: 0.5 * height
text: "Hi, Mom!"
anchors.verticalCenter: parent.verticalCenter
leftPadding: 0
topPadding: 0
bottomPadding: 0
}

And what do you mean by jumping of text,do you mean the sudden change in text font size when you increase or decrease the size of the window.