I am trying to achieve an element which is vertically and horizontally centered on the page, has padded margins, and elements inside it are equally spaced and centered & wrapped (if needed). So in essence I'm trying to achive something like this:
But unfortunately, when the screen shrinks, the text doesn't preserve padding, nor stars to wrap.
Ideally I'd want a one unit padding around both paragraphs of text & one unit spacing between the two paragraphs and all of them centred/wrapped.
I've tried calculating & setting width/height properties, but they didn't do anything.
Here is my code:
Tab {
objectName: "Tab2"
title: i18n.tr("Title")
page: Page {
anchors.fill: parent
Item {
anchors.centerIn: parent
Text {
id: text1
text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
wrapMode: Text.Wrap
width: parent.width
horizontalAlignment: Text.AlignHCenter
}
Text {
text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
wrapMode: Text.Wrap
width: parent.width
anchors {
top: text1.bottom
topMargin: units.gu(2)
}
horizontalAlignment: Text.AlignHCenter
}
}
}
}
