How to increase the "scrolling height" of a Qml ListView?

[daljit97]

So I have got a qml ListView and the bottom of the list I have got a little banner that is visible at all times. Now this works fine, but when I scroll the list to the end the bottom of the list is obviously covered by the banner. How can increase the amount of "scrolling height" so that the user is able to scroll further until the list is completely visible?

ListView{
    id: lisView
    anchors.fill: parent
}
Banner{
    id: banner
    width: listView.width/2
    anchors.bottom: parent.bottom
}

[DavidM29]

You can put your ListView into a Rectangle or an Item with the size of your available space.

Here is an example :

    Rectangle{ // Can be replace with Item 
        id: lisView
        height: parent.height-banner.height  // Make sure to set height or width or you could lose the scroll
        width: parent.width
        ListView{ // Your ListView you can put what you want in it
            spacing : 2
            model : 30
            delegate: Rectangle {
                height: 20
                width: 50
                border.color: "black"
                border.width: 1
                color: "blue"
            }
            anchors.fill: parent
        }
    }
    Rectangle{  // did not have your banner component so I replaced it with a rectangle but the idea is the same
        id: banner
        width: parent.width
        height: 50
        opacity: 0.4 //Set the opacity to make sure their is no more elements to show on the bottom of the ListView
        anchors.bottom: parent.bottom
    }

Hope this help

[daljit97]

The problem is that I want my list to visible behind the banner (which is transparent). Your solution would constrain me to make the list on top of the banner.

[ODБOï]

This post is deleted!

[DavidM29]

I don't really understand what you mean.

Can you please make a screenshot of your problem and draw what you are expecting ?

Here is what I did :

Here is what it looks like without adapting your list in a Rectangle :

Here with the banner on top of the listView :

I don't really get what is wrong

[VRonin]

Can you layout the banner below the view rather than on top?

[daljit97]

@DavidM29 So what I want is the list to be partial visible behind the transparent banner (like in your 2nd screenshot), however when the user scrolls up they are able to scroll until the content of the ListView sits on top of the banner.

[shaan7]

@daljit97 have you explored the footer and footerPositioning properties of ListView?

[daljit97]

@shaan7 The problem is this a banner that needs to visible in the entire application so it cannot be attached to the ListView

[GrecKo]

Add bottomMargin: banner.height to your ListView

EDIT: and as @shaan7 said, a footer with a z: 2 and footerPositioning: ListView.OverlayFooter works too.

[daljit97]

@GrecKo setting the bottomMargin will make the view sit on top of the banner. I want the list to be behind the transparent banner and when the user is nearly at the end they can scroll the content above the bannner

[GrecKo]

@daljit97 said in How to increase the "scrolling height" of a Qml ListView?:

@GrecKo setting the bottomMargin will make the view sit on top of the banner.

No, it has nothing to do with that.
Just place the banner on top of your ListView's delegate.
If your banner is a child of your ListView, set z: 2.
If it's a sibling of the ListView, declare it after or with a higher z.

See http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop and http://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview

[daljit97]

@GrecKo oh thank you very much. I confused bottomMargin for anchors.bottomMargin. I wasn't aware of this property being available. This is exactly what I needed!