Important: Please read the Qt Code of Conduct -

Horizontal ScrollBar not scrolling content in ListView

  • For the life of me I cannot make heads or tails of this:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("ListView Horizontal ScrollBar DelegateChooser")
        ListModel {
            id: listmodel
            ListElement {type:"one"; datas:"123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"}
            ListElement {type:"two"; datas:"123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"}
        ListView {
            width: parent.width/4
            height: parent.height
            clip: true
            spacing: 1
            delegate: Rectangle {
                width: window.width
                height: 20
                color: "darkred"
                border.color: "red"
                border.width: 1
                Text {
                    text: datas
                    color: "white"
            model: listmodel
            ScrollBar.horizontal: ScrollBar{}

    The delegate item is wider than the ListView itself. Shouldn't the scrollbar the delegate being shown?

  • Add this to scroll:

    ScrollBar.vertical: ScrollBar {}
        ScrollBar.horizontal: ScrollBar {
            id: horizscrollbar

    Also needs contentWidth to be set to largest contentItem. Found that to be tricky and didn't always work:

                       onCountChanged: {
                            var maxwidth = 0
                            for(var ind=0; ind<count; ++ind){
                                var item = itemAtIndex(ind)
                                if(item.width > maxwidth)
                                    maxwidth = item.width
                            contentWidth = maxwidth

Log in to reply