2

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:

Centred, wrapped and padded

But unfortunately, when the screen shrinks, the text doesn't preserve padding, nor stars to wrap.

Why you no wrap and missing padding

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

1 Answer 1

3

Your Item doesn't have width and height defined, so it takes the height of the children and the wrapping breaks.

This code probably does what you want, but maybe you need to tweak some margins:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Item {
                    anchors.fill: parent
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                            verticalCenter: parent.verticalCenter
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus\n\n" +
                              "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }
                }
            }
        }
    }
}

If you want to keep the two Text items separate, you can also use a Column:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Column {
                    spacing: units.gu(2)
                    anchors {
                        left: parent.left
                        right: parent.right
                        verticalCenter: parent.verticalCenter
                    }
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text2
                        text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                }
            }
        }
    }
}
2
  • Actually, the Item is not even needed, you can put the Text directly in the Page. Also, I recommend to use Label instead of Text in order to use UbuntuFont, and it gives you the ability to set fontSize as opposed to font.pixelSize.
    – timp
    Jun 20, 2013 at 13:06
  • With added leftMargin and rightMargin anchor properties this looks lovely and crisp.
    – Dima
    Jun 20, 2013 at 13:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .