Important: Please read the Qt Code of Conduct -

QML: calculate height with min/max range for Rectangle from child Text content

  • Hello,
    I’m new to QML and have following problem, some like [[SOLVED] QML: calculate size for Rectangle from child Text content]:
    I have a Rectangle element with the Text element inside of it. The Rectangle has Stationary Width 200, Minimum Height 100 and Maximum Height 200.
    Text of Text element is dynamic and wrapped by the rectangle height, font size is also dynamic.

    I need to resize my rectangle by height according to some spec:

    1. if text paintedHeight is smaller than Minimum Height 70(margin is 15), we will show the text in the center of the rectangle 200x100
    2. if text paintedHeight is between 70 and 270, we will show the text in the center of the rectangle 200x(paintedHeight +30)
    3. if text paintedHeight is bigger than Maximum Height 170, we will show the text in the center of the rectangle 200x200, and I want to elide the Text, but the problem is that elideRight will cause the text show in one line; and if I use clip, text in last line will be clipped and this is not friendly.

    __import QtQuick 1.1

    Rectangle {
    width: 200
    height: contentText.height + 30//the top margin + bottom margin
    Text {
    id: contentText
    anchors.centerIn: parent

        text: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyxxxxxxxxxxxxxxxxxxxxxxxxxdddddddddd"
        font.pixelSize: 30 //or regular or big
        width: parent.width - 30//the left margin + right margin
        height: Math.max(Math.min(paintedHeight, 70), 170)//range is [70, 170]
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        clip: true
        //elide: Text.ElideRight


    Thanks a lot!

    [edit: please add @ tags at the beginning and en of code fragments, Eddy]

  • Hi and welcome to devnet,

    Is there a special reason why you use an old version of Qt Quick?

    In version 2 there are some interesting features added which might help you. Have a look at "this overview":

  • Thanks for your update!
    Maybe we will upgrade to version 2 finally, but not in the next two months, so this is still a bug for me.

  • You can use implicitHeight and implicitWidth to help with this sort of thing, if you are not using higher-level controls to help you with layouts.

Log in to reply