ScrollBar not working properly QML

[roditu]

I've prepared a compilable Page that i can put in qmlonline6:

https://stephenquan.github.io/qmlonline/?zcode=AAAJ8HiczVZRb9owEH7Pr7DyAl27FJjoQ9geNqSplVptbaf1gfJgkiOx5tiZ44y1iP++sxOSEMLaStW0E1Lsu+8+n8/nMyxJpdLkWl/nLPhBRt5w7LAdnTeVQivJMzTu2S7pg8x1Rs68d47zlUawdhyCgj4CAs2kyNZWYURTFYH2iYKApfAZdBCDstZN4XXJMv2dwYqULEZWLNSxT1KqQGjPzipbDCyKdWUsprUrC33CS8pam8gQuG/XujJDUge4dSoCtNbKtqkZUA0R1eCTG9wjFRGHFsnfgjYSSC6VTyIQoJDohopQJlOj7B85O0hU5olo0RuhIoilyrwl43y70h4oS2nAROST4cDZM36D37qD+ED85C0ZDUg3WtHUJMu3lN4dTjtxGq1+kX9PM83BwDuRZX7cVcw0uJ0Q3Dx7xMqk/CNnkUgw0HJ9Oz+foqKsrqZs/rM84OkoCBnSZ09mQyqstX+Vjhfl4xXTkWmVF43jyXwseP7a2TiQm8bwNsBeyD9R5f0CpVlA8fZVulYZpZKz4KFhx+VX9CH7InZgGXuEulN5AQaO8Z3bbkZOa0O7vxW5sOALDcnhdmQEGzcGw/RdcYTjPcBTVaZoyPLML2pgvzxu4WeOgTBMuWAJNSdI8GdZD9wuLmWKhBXeuxBLJvDGd6Jte6y512SpZFLHOyFaVjO8UqgIc2Wxpv0NBq3TfR5tQdRgfg5tu4zqUTWcSnxHhblEUpgxBw348LSu3S+sqOItysgHMpu51Ip7QtxZz4x6J6S3QOnNjc6MFu58PtllWeIB9A0VQ5LBBD/vt6weBxHpeEKOj9lRx6WvA0DX0mfG2gugNF5Mj6YpiLC/rlr89kGdDebkmLj34l5guK3OV4GGu6DdflChRjVqczRphtPMd5l1+13mwvJ0v7qNEi02HeKOr6iOvSWWqerbobIeCH5DRuOzxrLGBXcD4qVOpoU9x6dyUqBzJfD/l6eiBe2bOE8RMz4p1y8nlrccD8s1MREb5w8GOJxa

There is an issue with the scrollbar, i want it to scroll through elements, but the scrollbar gets very very long, in my program when i scroll all the way down, only then the rest of the content shows up, which is weird, and generally it's scuffed and doesn't work properly, why?

now in my app it looks like this, with an additional image above the text

so the scrollbar is very small and then when i scroll down just a little bit the whole content just disappears... under this orange text there is another blue text btw.

And then after a lot of scrolling it appears literally at the bottom of that entire scroll area.

This is the code straight from my app, it won't compile in qmlonline, but for Your reference:

import QtQuick 2.15
import QtQuick.Controls 2.5
import QtQuick.Layouts 6.3

Page{

    Connections{
        target: recipeFetcher
    }

    ListView {

        width: parent.width
        height: parent.height

        id: listView

        model: ListModel {
            //Will be populated dynamically
            id: recipeModel
        }

        delegate: Rectangle {
            width: parent.width
            color: generateRandomColor()

            Column {
                anchors.fill: parent
                spacing: 10

                Image {
                    id: img
                    width: root.width / 3
                    height: width
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    anchors.horizontalCenter: parent.horizontalCenter
                    fillMode: Image.PreserveAspectFit
                    source: "data:image/png;base64," + model.base64
                    smooth: true
                    antialiasing: true
                }

                Text {
                    Layout.fillHeight: true
                    width: parent.width - 20 // Adjust the width as needed
                    wrapMode: Text.Wrap
                    text: model.titleText
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                }

                Text {
                    Layout.fillHeight: true
                    width: parent.width - 20 // Adjust the width as needed
                    wrapMode: Text.Wrap
                    text: model.ingredientsText
                    color: "orange"
                    horizontalAlignment: Text.AlignHCenter
                }

                Text {
                    Layout.fillHeight: true
                    width: parent.width - 20 // Adjust the width as needed
                    wrapMode: Text.Wrap
                    text: model.instructionsText
                    color: "blue"
                    horizontalAlignment: Text.AlignHCenter
                }
            }

        }

        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
            size: listView.contentHeight / listView.height

            contentItem: Rectangle {
                implicitWidth: 5
                color: "orange"
                radius: width

                SequentialAnimation on color {
                    loops: Animation.Infinite
                    ColorAnimation { from: "orange"; to: "orangered"; duration: 1000 }
                    ColorAnimation { from: "orangered"; to: "orange"; duration: 1000 }
                }
            }
        }

        Component.onCompleted: {

            var recipes = recipeFetcher.getRecipesStrings();

            for (var i = 0; i < recipes.length; ++i) {

               var imageBase64 = recipeFetcher.loadImage(i);

               var recipe = recipes[i];

               var ingredientsList = recipe[1].replace(/'/g, '').split(', ');

               recipe[1] = ingredientsList.join("\n").slice(1);

               recipeModel.append({titleText: recipe[0] + "\n\n", base64: imageBase64, ingredientsText: recipe[1] + "\n\n", instructionsText: recipe[2] + "\n\n"});
           }

        }
    }


    function generateRandomColor() {
        var red = Math.floor(Math.random() * 256);
        var green = Math.floor(Math.random() * 256);
        var blue = Math.floor(Math.random() * 256);

        return Qt.rgba(red / 255, green / 255, blue / 255, 1);
    }

}

[JoeCFD]

@roditu add this in your code for debugging. Then you may know why the size is so big.

ScrollBar.vertical: ScrollBar {
    id: vscrollBar
}

Component.onCompleted: {
    console.log( "size = ",vscrollBar.size )
}