Set height of popup to contain contents

Question

I want to set the size (mainly height) of my popup to fit the contents depending on how much text is shown or whether there's an icon image shown on popup. How do I set the height of popup.

Eg.

Popup {
    id: popup
    width: window.width/2
    height: window.height/4
    x:  window.width/2 - width/2
    y: window.height/2 - height/2

    Rectangle {
        id: popupContent
        width: parent.width
        height: parent.height
        visible: notification
        anchors.fill: parent
        
        Rectangle {
            id: iconField
            anchors.top: parent.top
            width: parent.width
            height: parent.height/2

            Image {
                id: img
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                width: window.width/18
                height: window.width/18
                fillMode: Image.PreserveAspectFit
                source: "qrc:/images/icons/info.png"
            }
        }

        Rectangle {
            id: textField
            anchors.top: iconField.bottom
            width: parent.width
            height: parent.height/2

            Text {
                id: text1
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                width: parent.width
                wrapMode: Text.WordWrap
                text: "This long text overflows out of the popup up rectangle!"
            }
        }
    }
}

If I use a long text then the text overflows from the popup rectangle. I tried using implicitHeight in different places but I don't understand how to apply it in this situation.

Answer 1

There's several issues with your code. It's hard to make a perfect answer because I don't know exactly what's intended. For example, your text will always be off the bottom of the Rectangle because you anchored textField's anchor.top to iconField.bottom, and iconField is the same size as the entire popup. But here's some ideas on how to improve it.

1. Your popupContent is a Rectangle, but I'm not sure if you actually are intending to draw a rectangle there or not. I think you could replace that with a ColumnLayout like the example here.

2. You can also manually specify the height of your content using the contentHeight property. You could set it to the height of your iconField plus the height of your textField, plus any padding you want.

3. Every Item has a property called childrenRect.height which will tell you the combined height of all of its children.

For all of these options though, you will need to stop setting every object's height to be the same as its parent's height.