CODEWITHSUNDEEP
qmlscrollbar
lvr123
lvr123

Reputation: 584

Scrollbar does not show-up

This ScrollBar does not show up, and I don't understand why. At the best of my attemps, I got a big red rectangle, but no way to use it to scroll the idRootsGrid horizontally. What I'm missing ?

Flickable {
    id: flickable
    Layout.alignment: Qt.AlignLeft
    Layout.fillWidth: true
    Layout.preferredHeight: idRootsGrid.implicitHeight
    clip: true
    ScrollBar.horizontal: ScrollBar {
        //anchors.top: flickable.top
        anchors.bottom: flickable.bottom
        //anchors.right: flickable.right
        //anchors.left: flickable.left
        active: true
        visible: true
        contentItem: Rectangle {
            id: contentItem_rect2
            radius: implicitHeight / 2
            color: "Red"
            width: 10 // This will be overridden by the width of the scrollbar
            height: 10 // This will be overridden based on the size of the scrollbar
        }
        //size: 10
        width: 5
   //height: 10
    }
    GridLayout {
        id: idRootsGrid
        columnSpacing: 5
        rowSpacing: 10
        Layout.alignment: Qt.AlignLeft
        rows: 1
        ...

Thanks!

Upvotes: 0

Views: 105

Answers (1)

JarMan
JarMan

Reputation: 8277

I found two problems in your code. The main problem is that your Scrollbar's contentItem needs to have an implicitHeight defined. It uses implicitHeight rather than height to determine how to draw it.

And second, your Flickable needs to know how big its contents are, so I had to set its contentWidth property to the size of your GridLayout.

Flickable {
    id: flickable
    Layout.alignment: Qt.AlignLeft
    Layout.fillWidth: true
    Layout.preferredHeight: idRootsGrid.implicitHeight
    clip: true

    contentWidth: idRootsGrid.width

    ScrollBar.horizontal: ScrollBar {
        anchors.bottom: flickable.bottom
        active: true
        visible: true

        contentItem: Rectangle {
            id: contentItem_rect2
            radius: implicitHeight / 2
            color: "Red"

            implicitHeight: 10
        }
    }
    GridLayout { ... }
}

Upvotes: 1

Related Questions