How can I make my GroupBox Layouts scalable in QML?

Question

I have the following problem. I created a Periodic table in QML that consists of GroupBoxes that contain a ColumnLayout in order to arrange the specific properties of each element. But as you can see in the pictures...

Window after starting

Window after downsizing

... the properties will not scale properly according to the size of the GroupBox. So when I scale down the size of the window, some text properties will just move out of its GroupBox and lay wherever they are not supposed to be. How can I fix this?

//PeriodicTable.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15

Item {
    id: root
    Button {
        id: button
        checkable: true
        text: qsTr("Show")

        onClicked: window.show()
    }
    Window {
        id: window
        Material.accent: parent.Material.accent
        Material.background: parent.Material.background
        Material.foreground: parent.Material.foreground
        Material.primary: parent.Material.primary
        Material.theme: parent.Material.theme
        color: Material.background
        height: parent.height
        title: qsTr("Periodic table")
        width: parent.width

        GridView {
            id: gridview
            anchors.fill: parent
            cellHeight: cellWidth * 1.5
            cellWidth: parent.width / 18

            delegate: PeriodicTableDelegate {
            }
            model: PeriodicTableModel {
            }
        }
    }
}

//PeriodicTableModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

ListModel {
    id: elements
    ListElement {
        atomicWeight: "1.00794"
        electronConfiguration: qsTr("1s")
        elementName: qsTr("Hydrogen")
        elementSign: qsTr("H")
        ionizationEnergy: qsTr("13 5984")
        ordinalNumber: qsTr("1")
        unknownNumber: qsTr("S1/2")
    }
} // I shortened this to just one element because yet it is the only one I have

// PeriodicTableDelegate.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

GroupBox {
    property int cellHeight: GridView.view.cellHeight
    property int cellWidth: GridView.view.cellWidth

    height: cellHeight
    width: cellWidth

    ColumnLayout {
        RowLayout {
            Label {
                Layout.alignment: Qt.AlignLeft
                Layout.fillWidth: true
                font.bold: true
                text: ordinalNumber
            }
            Label {
                Layout.alignment: Qt.AlignRight
                text: unknownNumber
            }
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            font.bold: true
            text: elementSign
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: elementName
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: atomicWeight
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: electronConfiguration
        }
        Label {
            Layout.alignment: Qt.AlignHCenter
            text: ionizationEnergy
        }
    }
}

Answer 1

a slightly contrived example:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.0

Window {
    height: 800
    width: 600
    visible: true
    title: qsTr("cell test")

    GridView {
        id: grid
        anchors.fill: parent
        cellHeight: grid.height / 3
        cellWidth: grid.width / 4
        model: 12
        delegate: Rectangle {
            id: rect
            width: grid.cellWidth
            height: grid.cellHeight
            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

            ColumnLayout {
                id: layout
                anchors.fill: parent
                Repeater {
                    model: 5
                    Text {
                        id: txt
                        property int fsize: (layout.height + layout.width) / 30
                        Layout.fillWidth: true
                        text: "some text"
                        horizontalAlignment:Text.AlignHCenter
                        font.pointSize: fsize > 0 ? fsize : 16

                    }
                }
            }
        }
    }
}

Answer 2

The ColumnLayout in your GroupBox is missing an anchors.fill: parent .