Solved Center vertically item on Flickable
-
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?
-
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 someconsole.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.
- 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.
-
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.