ColumnLayout inside ScrollView doesn't resize its content

Question

Here's how it looks:

Both 3rd and 4th Card are laid out with ColumnLayout. The only difference is ColumnLayout of the 4th Card is inside ScrollView. Here's the main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: "Test Window"

    GridLayout{
        anchors.fill: parent
        columns: 2
        rows: 2
        Card{
            header: "H1"
            ColumnLayout{
                Text{text: "text 1"}
                Text{text: "text 2"}
                Text{text: "text 3"}
            }
        }
        Card{
            header: "H2"
            Text{text: "text 2"}
        }
        Card{
            header: "H3"
            ColumnLayout{
                Field{
                    label: "Name"
                    placeholder: "name"
                }
                Field{
                    label: "Age"
                    placeholder: "age"
                }
            }
        }
        Card{
            header: "H4"
            ScrollView{
                /*
                anchors.fill: parent
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: parent.width
                Layout.preferredWidth: parent.width
                contentWidth: parent.width
                width: parent.width
                */

                clip: true
                ColumnLayout{
                    //anchors.fill: parent
                    Field{
                        label: "Name"
                        placeholder: "name"
                    }
                    Field{
                        label: "Age"
                        placeholder: "age"
                    }
                    Field{
                        label: "Address"
                        placeholder: "address"
                    }
                    Field{
                        label: "Age"
                        placeholder: "age"
                    }
                    Field{
                        label: "Address"
                        placeholder: "address"
                    }
                }
            }
        }
    }
}

I've tried with everything commented out in 4th Card, none of those helps! here's the Card.qml:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

Item {
    default property alias content: content.children /*content.data*/
    property alias header: header.text
    property double margin: 10
    property double separatorMargin: 5

    Layout.fillHeight: true
    Layout.fillWidth: true
    Layout.margins: 10

    Rectangle{
        id: rect
        anchors.fill: parent
        ColumnLayout{
            anchors.fill: parent
            Text{
                id: header
                font.bold: true
                leftPadding: margin
                topPadding: margin
            }
            Rectangle{
                id: separator
                Layout.fillWidth: true
                Layout.leftMargin: separatorMargin
                Layout.rightMargin: separatorMargin
                height: 2
                border.color: "black"
            }
            StackLayout {
                id: content
                Layout.preferredHeight: parent.height
                Layout.leftMargin: margin
                Layout.rightMargin: margin
            }
        }
    }
    DropShadow{
        anchors.fill: rect
        source: rect
        radius: 10
        samples: 15
        color: "black"
    }
}

and here's Field.qml:

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

RowLayout{
    property alias label: label.text
    property alias placeholder: field.placeholderText

    Label{
        id: label
        Layout.minimumWidth: 50
    }
    TextField{
        id: field
        Layout.fillWidth: true
        Layout.preferredHeight: 30
        font.pointSize: 12
        verticalAlignment: Qt.AlignVCenter
    }
}

Unknown Unknown · Accepted Answer · 2020-06-30T20:06:33

I don't know why do I get some answers after posting a question!

This has a solution, I'd to add this:

width: Math.max(implicitWidth, scrollview.availableWidth)

inside ColumnLayout.

EDIT

This doesn't work if I add:

ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

Here's how it looks with horizontal bar turned off:

ColumnLayout inside ScrollView doesn't resize its content

1 Answers