Wrapping ListView inside a Rectangle

Question

My problem is when I scroll ListView elements, the elements scroll over the rectangle's border, even though I have wrapped the ListView inside the Rectangle.

How can I make elements scroll without going past the Rectangle borders?

Following is the code:

ListModel{
    id: mod
}

Rectangle{
    id:listviewrec
    x: 347
    y:644
    width: 700
    height: 91
    radius: 4
    border.color:"#7CC7FF"
    border.width: 4
    visible: true

    ListView{
        id:modlistview
        width: listviewrec.width
        height: listviewrec.height
        clip: true
        boundsBehavior: Flickable.DragOverBounds
        spacing:25
        model:mod
        delegate: delegateimage
        orientation: Qt.Horizontal
        anchors.fill: listviewrec
    }
}

Component{
    id:delegateimage
    Item{
        id:imageitem
        width:50
        height:60
        visible:true
        
        Rectangle{
            id:imagerec
            x:10
            y:6
            width: 60
            height:70                    
            border.color: "#7CC7FF"
            border.width: 5
            radius: 2
            visible:true

            Image{
                x: 3
                y: 3
                height : imagerec.height
                visible: true
                width : imagerec.width
                anchors.fill: imagerec
                source:fileUrl
            }
        }
    }
}

Answer 1

It seems a matter of removing explicit width and height settings, since you are using anchors.fill.

Answer 2

I don't think QML has the concept of inner and outer rects as far as borders are concerned, (or if it does, borders are drawn in the inner-rect, so children will be drawn on top).

Your best bet here is to probably do something like this:

Item {
    id:listviewrec
    x: 347
    y:644
    width: 700
    height: 91
    visible: true

    ListView{
        id:modlistview
        width: listviewrec.width
        height: listviewrec.height
        clip: true
        boundsBehavior: Flickable.DragOverBounds
        spacing:25
        model:mod
        delegate: delegateimage
        orientation: Qt.Horizontal
        anchors.fill: listviewrec
    }

    Rectangle {
        radius: 4
        border.color:"#7CC7FF"
        border.width: 4
        color: 'transparent'
        anchors.fill: parent
    }
}

It simply draws a transparent rect with the border you want on top of the ListView.