Center vertically item on Flickable

deleted357

Hi,

I can't center vertically Label on Flickable as you can see below :

Page {

    // Title
    Loader {
        id: title
        anchors {
            top: parent.top
            topMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 10
        }
        source: "TitleLabel.qml"
    }

    Flickable {
        interactive: true
        anchors {
            top: title.bottom
            topMargin: 10
            bottom: buttonValidate.top
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 10
        }
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.AutoFlickDirection
        contentHeight: labelMessage.implicitHeight

        Label {
            id: labelMessage
            anchors.centerIn: parent
            width: parent.width
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.Wrap
            text: displayMessage.message
            font.pixelSize: 20
        }

        ScrollBar.vertical: ScrollBar { }
    }

    Button {
        id: buttonValidate
        anchors {
            bottom: parent.bottom
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 10
        }

        contentItem: Text {
...
        }
}

"anchors.centerIn: parent" isn't working since I surrounded Label with Flickable.

Any idea?

deleted357

Please help!

mbnoimi

Try to use:

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

deleted357

Not working! Label isn't vertically centered.

    Label {
        id: labelMessage
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.centerIn: parent
        width: parent.width
        horizontalAlignment: Text.AlignHCenter
        wrapMode: Text.Wrap
        text: displayMessage.message
        font.pixelSize: 20
    }

timday

Personally, when I have problems like this I replace anchor-based layout with explicit x,y positioning (e.g using y: 0.5*(parent.height-height) to vertically centre something) and add some console.log output of x, y, width & height elements looking for where my assumptions are wrong. And they always are wrong somewhere.

Yashpal

@safi_bachelet said in Center vertically item on Flickable:

contentHeight: labelMessage.implicitHeight

You have set the flickable contentHeight to label height, that is limiting your flickable area to label height.

Remove contentHeight: labelMessage.implicitHeight to vertically center label on Flickable.
Also, you can play around with 'contentHeight' by giving different value and understand the contentHeight property better.

deleted357

I found the solution thanks to you:

Flickable {
    id: flickableMessage
    ...
    contentHeight: labelMessage.implicitHeight > flickableMessage.height ? labelMessage.implicitHeight : flickableMessage.height

    Label {
        id: labelMessage
        ...
    }

    ScrollBar.vertical: ScrollBar { }
}

Thanks guys.