Layouts cannot be nested

[Kai Mast]

Hi,

in the documentation it says that layouts can be nested. However, when I do this the "inner" Layouts element is broken.

Has this ever been tested?

[Zsombor Egri (zsombi)]

Yes, it has been tested, there are test cases with it, and works well. Could you provide a small example reproducing the failure? Thx!

[Matt Richardson (m-richardson-1990)]

Hi I am also affected by this.
Here is a simple ui which (on my machine at least) demonstrates the problem:

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Layouts 0.1

MainView {
    objectName: "mainView"
    applicationName: "com.ubuntu.developer..LayoutNestTest"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("Simple")

        Layouts {
            id:pageLayouts
            anchors.fill: parent
            layouts: [
                ConditionalLayout {
                    name: "mainColumn"
                    when: pageLayouts.width < pageLayouts.height
                    Column {
                        anchors.fill: parent
                        ItemLayout {
                            item: "redRectItem"
                            width: parent.width
                            height: parent.height/2
                        }

                        ItemLayout {
                            item: "lowerRectItem"
                            width: parent.width
                            height: parent.height/2
                        }
                    }
                },

                ConditionalLayout {
                    name: "mainRow"
                    when: pageLayouts.width >= pageLayouts.height
                    Row {
                        anchors.fill: parent
                        ItemLayout {
                            item: "redRectItem"
                            width: parent.width/2
                            height: parent.height
                        }

                        ItemLayout {
                            item: "lowerRectItem"
                            width: parent.width/2
                            height: parent.height
                        }
                    }
                }

            ]

            Rectangle {
                id: redRect
                color: "red"
                Layouts.item: "redRectItem"
                width: parent.width
                height: parent.height/2
            }

            Rectangle {
                id: lowerRect
                color: "yellow"
                Layouts.item: "lowerRectItem"
                width: parent.width
                height: parent.height/2

                Layouts {
                    id:nestedLayouts
                    anchors.fill: parent
                    layouts: [
                        ConditionalLayout {
                            name: "nestedColumn"
                            when: nestedLayouts.width < 300
                            Column {
                                anchors.fill: parent
                                ItemLayout {
                                    item: "blueRectItem"
                                    width: parent.width
                                    height: parent.height/2
                                }

                                ItemLayout {
                                    item: "greenRectItem"
                                    width: parent.width
                                    height: parent.height/2
                                }
                            }
         ...

[Nekhelesh Ramananthan (nik90)]

@Matt Richardson, the example you provided above is incorrect due to the following reasons,

1. You have defined 2 conditional layouts in the PageLayout in addition to a default layout which is correct. However you have failed to declare the anchoring of the rectangles in the default layout. This can lead to one rectangle overlapping the other in the PageLayout.

2. In the nested layout, you have failed to specify the width and height of blueRect and greenRect in the default layout in addition to the missing anchor definition. This leads to the rectangle disappearing and just resulting in the yellow rectangle being shown.

This is hence not a bug with using Nested Layouts in Ubuntu Layouts SDK feature. Hence I am marking this bug incomplete until you can reproduce the bug again.

I have corrected your example and made some minor changes which you can find at http://paste.ubuntu.com/7183962/. This illustrate the proper functioning of Nested Layouts.