Center vertically item on Flickable



  • Hi,

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

    0_1500990774539_pagetitle.png

    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?



  • Please help!



  • Try to use:

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


  • 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
        }


  • 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.



  • @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.

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


  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.