Height of QML rectangle depending on child contents (SailfishOS app)

Question

I have a rectangle which displays some information in the center of my app, like so:

   Rectangle {
      id: info
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      width: parent.width * 0.8
      height: 500

      Column {
         spacing: Theme.paddingLarge

         anchors.top: parent.top
         anchors.topMargin: Theme.paddingLarge
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - 2*Theme.paddingLarge

         Row {
            spacing: Theme.paddingLarge * 2
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
               anchors.verticalCenter: parent.verticalCenter
               font.pointSize: Theme.fontSizeLarge
               text: info.brand
            }

            Image {
               width: 64
               height: 64
               source: "qrc:///graphics/other.png"
               anchors.verticalCenter: parent.verticalCenter
            }
         }

         Text {
            anchors.horizontalCenter: parent.horizontalCenter

            font.pointSize: Theme.fontSizeTiny
            wrapMode: Text.WordWrap
            width: parent.width
            text: info.priceString
         }

         Row {
            spacing: Theme.paddingMedium
            anchors.horizontalCenter: parent.horizontalCenter

            Rectangle {
               width: 60
               height: 30
            }

            Text {
               anchors.verticalCenter: parent.verticalCenter
               font.pointSize: Theme.fontSizeTiny
               text: info.description
            }

            Image {
               source: "qrc:///graphics/locked.png"
               width: 64
               height: 64
            }
         }

         Row {
            spacing: Theme.paddingMedium
            anchors.horizontalCenter: parent.horizontalCenter

            Button {
               text: qsTr("Find")
               width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
               visible: scooterInfo.mode == "show"
            }
            Button {
               text: qsTr("Missing")
               width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
               visible: scooterInfo.mode == "show"
            }
         }
      }
   }

Now since its a SailfishOS app, the font sizes as well as the padding will differ according to the theme. This leaves me unable to set a fixed height for the Rectangle with id info.

It already makes a difference when running in emulator and when running on my device. I can make only one of both fit, not both at the same time.

So I need a way to have the rectangle automatically pick an appropriate height according to its contents, including padding. How can I achieve this?

Answer 1

I tested your code and got it to work by removing the top and bottom anchors from your Column object. Columns will automatically resize themselves based on their children, so you don't need to manually restrict their height.

Rectangle {
    id: info
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    width: parent.width * 0.8
    height: childrenRect.height  // Resize to fit children

    Column {
        spacing: Theme.paddingLarge

        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width - 2*Theme.paddingLarge

        ...
    }
}