how to make the height change automatically if the text changes

Question

I would like to know the height of my text/label after altering the text. Lets take a dialog system in a game as an example. If I have more text to display, the height of the label and the background will need to expand (automatically) (and vice versa).

Currently it displays the text correctly (if I set clipping to false), but it does not change the height of the label. So, if I put 3 labels in a column, they can have text overlapping.

In other languages like delphi/pascal (using firemonkey), the size of the label has the property "autosize" and it resizes the height of the label depending on the (length of the) content. With a hidden label one can simply get the height of the visual label (and also change the accompanying background accordingly).

Is there such an option in Qt/Qml ?

As requested an example I'm working on (from a course of Bryan Cairns) where the text of the second and third label overlap :

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

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

    Column {
        x: 0
        y: 0
        width: 538
        height: 340
        Label {
            id: label
            x: 60
            y: 38
            text: qsTr("This is a label")
        }

        Label {
            id: label1
            x: 60
            y: 74
            width: 107
            height: 75
            color: "#ff0000"
            text: qsTr("This is a long label title - probably the longest ever")
            wrapMode: Text.WordWrap
            font.pointSize: 13
            font.italic: true
            font.bold: true
            textFormat: Text.AutoText
            clip: false
        }

        Label {
            id: label2
            x: 60
            y: 208
            text: qsTr("This is <font color='blue'><b>H<i>T</i>ML</b>!!!</font>")
            font.pointSize: 40
        }
    }
}

Answer 1

Like JarMan suggested : removing the height property from the label does the job. To better answer my question I have altered the example and used a hidden label and the onheightChanged event of that label to modify the height of 'something else'. In a game dialog that could be a background for the text and the text of the dialog itself. In this example I just modify the (fixed) height of label1 depending on the text I feed labelHidden.

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

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

    Label {
        id: labelHidden
        x: -600
        //y: 74
        width: 200
        //height: 75
        color: "#ff0000"
        text: qsTr("This is a long label title - probably the longest ever")
        wrapMode: Text.WordWrap
        font.pointSize: 13
        font.italic: true
        font.bold: true
        textFormat: Text.AutoText
        clip: false

        onHeightChanged: {
            label1.height = height
            label1.text = text
        }
    }

    Column {
        x: 0
        y: 0
        width: 538
        height: 340
        Label {
            id: label
            x: 60
            y: 38
            text: qsTr("This is a label")
        }

        Label {
            id: label1
            x: 60
            //y: 74
            width: 200
            height: 75
            color: "#ff0000"
            text: qsTr("This is a long label title - probably the longest ever")
            wrapMode: Text.WordWrap
            font.pointSize: 13
            font.italic: true
            font.bold: true
            textFormat: Text.AutoText
            clip: false
        }

        Label {
            id: label2
            x: 60
            y: 208
            text: qsTr("This is <font color='blue'><b>H<i>T</i>ML</b>!!!</font>")
            font.pointSize: 40
        }
    }

    Button {
        id: button
        x: 521
        y: 422
        text: qsTr("Make longer")
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 18

        Connections {
            target: button
            onClicked: {
                labelHidden.text = "This is an even longer text that alters the height of an invisible label and in its turn triggers the onHeightChange event of the invisible label to modify for instance a background height and a label height in a game dialog. For this example it only changes the height of label1."
            }
        }
    }
}