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

TextField vertical alignment problem



  • 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.
    1_1546332689588_test2.png
    0_1546332689585_test1.png
    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?


  • Qt Champions 2017

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



  • @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.


  • Qt Champions 2017

    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.



  • @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.



  • 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.


Log in to reply