Cannot get correct width for a ListView embedded in a ScrollView

[cheezus]

I'm trying to overlay a ListView that is embedded in a ScrollView, but cannot seem to figure out the right width to use for the ListView delegate.

If I use a width of parent.width for the item item below, it looks like the first image. If I set an actual width (of say 300, it looks like the second. So it seems that the problem is that the item is not receiving a width. Could someone help me disentangle why this could be the case?

    ScrollView{
        id: root
        anchors.fill: parent
        Item {
            id: item
            height: 3000
            width: parent.width
            ListView {
              id: view
              anchors.fill: parent
              model: 100
              delegate: Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
            }

            Rectangle {
                color: "purple"
                width: 30
                height: 30
                x: 25
                y: 25
            }

        }
    }

Using parent.width: http://i.imgur.com/iDyY1bs.png

Using a fixed width: http://i.imgur.com/37RcP1X.png

[p3c0]

Hi @cheezus,
Quoting from the docs:

The width and height of the child item will be used to define the size of the content area.

May be I'm wrong but what I understand is that the user needs to provide the widthand height to the direct child of ScrollView which in your case is item and hence ScrollView will adjust accordingly.

[hvoigt]

Two questions arise from your code:

Why is there a Rectangle next to the ListView in the Item?
Why do you have a hardcoded height set?

To me it seems ambigous what the ScrollView should scroll. The Item or the ListView? If I reorder your code like this it works:

Window {
    visible: true
    width: 640
    height: 480

    ScrollView{
        id: root
        anchors.fill: parent
        ListView {
            id: view
            anchors.fill: parent
            model: 100
            delegate: Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
        }
    }
    Rectangle {
        color: "purple"
        width: 30
        height: 30
        x: 25
        y: 25
    }
}

But thats probably not what you want? Maybe you can clarify what your goal is you want to achieve?

BTW, I found out that when you use root.width in your code the delegates get a width. But for some reason item.width and view.width do not work. So it seems the ScrollView is not passing its width on to the Item here.

Just tried using a Rectangle, a Column and a Repeater and this also shows the same symptoms. So to me it seems like there might be a bug in the ScrollView? But I am still a QML beginner so not sure. Here is the code:

    ScrollView{
        id: root
        anchors.fill: parent
        Rectangle {
            id: item
            height: 3000
            width: parent.width
            Column {
                Repeater {
                  id: view
                  model: 100
                  Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
                }
            }

            Rectangle {
                color: "purple"
                width: 30
                height: 30
                x: 25
                y: 25
            }

        }
    }

[cheezus]

@p3c0 Thanks, I did re-read this in the end and forgot to update the thread. It all works great now, thanks!

[cheezus]

@hvoigt FWIW, I wanted to overlay the first ListView with other random objects. Imagine buckets and things going into multiple buckets. I wanted to scroll both the ListView and the item.