ScrollBar doesn't match Flickable contents

mzimmers

Hi all -

I'm trying to use a Flickable with a ScrollBar. My scroll bar doesn't seem "attached" to the contents of the Flickable; can someone tell me what I'm doing wrong here?

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 800
    height: 480

    Item {
        anchors.fill: parent
        anchors.margins: 24.0
        Flickable {
            anchors.fill: parent
            clip: true
            contentHeight: col.height
            ColumnLayout {
                id: col
                anchors.fill: parent

                Repeater {
                    model: 100
                    Text {
                        text: model.index
                        font.pixelSize: 16
                    }
                }
            }
            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AlwaysOn
            }
        }
    }
}

Thanks...

johngod

@mzimmers

Remove the anchor.fill: parent inside the ColumnLayout and it will work

mzimmers

Yes it does...thanks for that tip. It does bring up another problem, though - how best to set the width of the contents of the Flickable. I got this to work:

Flickable {
    anchors.fill: parent
    clip: true
    contentHeight: col.height
    ColumnLayout {
        id: col
        width: pumpDrawer.width - scroller.width
        // all my stuff
    }
    ScrollBar.vertical: ScrollBar {
        id: scroller
        policy: ScrollBar.AlwaysOn
    }
}

but it seems kind of clunky to have to subtract the width of the scroll bar from my contents. Is there a more automatic way of doing this?

Thanks...

johngod

Try this:

anchors.left: parent.left               
anchors.right: parent.right

mzimmers

@johngod said in ScrollBar doesn't match Flickable contents:

anchors.left: parent.left
anchors.right: parent.right

Where do I apply these? I tried them in the Flickable and the ColumnLayout, but neither helps.

EDIT:

Here's what I'm working with now (doesn't work right):

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 800
    height: 480

    Flickable {
        anchors.fill: parent
        clip: true
        RowLayout {
            anchors.left: parent.left
            anchors.right: parent.right

            Label {
                font.pixelSize: 24
                Layout.alignment: Qt.AlignLeft
                text: "xxx"
            }

            Label {
                Layout.alignment: Qt.AlignRight
                text: "yyy"
                font.pixelSize: 24
            }
        }
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
        }
    }
}

Thanks...

johngod

Hi
For ScrollBar to work properly you have to set contentHeight of Flickable
If I understood correclty you want yyy at right, but not overlapped by scrollbar right ?
Check if this is what you want

ApplicationWindow {
    visible: true
    width: 800
    height: 480

    Flickable {
        anchors.fill: parent
        clip: true
        contentHeight: rowL.height

        RowLayout {
            id: rowL
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.rightMargin: scroll.width

            Label {
                font.pixelSize: 24
                Layout.alignment: Qt.AlignLeft
                text: "xxx"
            }

            Label {
                Layout.alignment: Qt.AlignRight
                text: "yyy"
                font.pixelSize: 24
            }
        }
        ScrollBar.vertical: ScrollBar {
            id: scroll
            policy: ScrollBar.AlwaysOn
        }
    }
}

mzimmers

@johngod thank you -- that fixed it. (I had the contentHeight in my real code; I just left it out for brevity.) I was missing the anchors.rightmargin setting.

I do find it a bit surprising that QML doesn't have a more "automated" method for doing this - after all, nobody is going to want their content to overlap their scroll bar - but this works, so I'll run with it.

Thanks again...