Using a Qml Loader in combination with Pagestack and Tabs results in incorrect positioning

[Nekhelesh Ramananthan]

I have been investigating on using a QML Loader for the clock app to reduce its start-up time and improve memory usage. The clock app uses a structure similar to the SDK Doc examples as shown below. This structure basically combines PageStack and Tabs component together.

MainView {
    id: mainView
    width: units.gu(38)
    height: units.gu(50)

    PageStack {
        id: pageStack
        Component.onCompleted: push(tabs)

        Tabs {
            id: tabs
            Tab {
                title: "Tab 1"
                page: Page {
                    Button {
                        anchors.centerIn: parent
                        onClicked: pageStack.push(page3)
                        text: "Press"
                    }
                }
            }
            Tab {
                title: "Tab 2"
                page: Page {
                    Label {
                        anchors.centerIn: parent
                        text: "Use header to navigate between tabs"
                    }
                }
            }
        }
        Page {
            id: page3
            visible: false
            title: "Page on stack"
            Label {
                anchors.centerIn: parent
                text: "Press back to return to the tabs"
            }
        }
    }
}

However instead of loading say "Tab 2" on startup, I chose to load it only when the user navigates to the tab. I achieved this by using a QML Loader as follows,

Tab {
            id: tab2
            title: i18n.tr("External")
            page: Loader {
                parent: tab2
                anchors.fill: parent
                source: (tabs.selectedTab === tab2) ? Qt.resolvedUrl("MyCustomPage.qml") : ""
            }
        }

However when you switch to "tab2", you will notice that the elements of the page do not anchors to the bottom of the tabbar. Instead they overlap with the tabbar. It is as if the tabbar did not exist.

I have attached a sample project which can be used to reproduce this issue. All the code that has been mentioned above in the description have been taken from the SDK docs only.

[Tim Peeters (tpeeters)]

Thanks for the great sample project, very helpful.

I'm looking into it.

[Tim Peeters (tpeeters)]

from UITK Page.qml:

    height: parent ? page.flickable ? parent.height : parent.height - internal.headerHeight : undefined

internal.headerHeight is updated correctly, but for some reason the height is not updated... investigating further.

[Tim Peeters (tpeeters)]

The issue is caused by the Loader resizing its source, see http://qt-project.org/doc/qt-5/qml-qtquick-loader.html#loader-sizing-behavior

[PS Jenkins bot (ps-jenkins)]

Fix committed into lp:ubuntu-ui-toolkit at revision None, scheduled for release in ubuntu-ui-toolkit, milestone Unknown

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-ui-toolkit - 0.1.46+14.04.20140212-0ubuntu1

---------------
ubuntu-ui-toolkit (0.1.46+14.04.20140212-0ubuntu1) trusty; urgency=low

  [ Andrew Hayzen ]
  * Fixed text not aligned at vertical centre if the listitem height has
    changed dynamically. Fixed no removeItemAnimation if the listitem
    height has been set. (LP: #1263688, #1263682)

  [ CI bot ]
  * Trunk as is, for CI Train release.

  [ William Hua ]
  * Also update LANGUAGE when setLanguage is called for dynamic
    translation. (LP: #1263163). (LP: #1263163)

  [ Timo Jyrinki ]
  * A qtdeclarative5-private-dev packaging change adding a dependency on
    libqt5v8-5-private-dev has been backported to all Ubuntu versions
    now, so this workaround can now be dropped - building both against
    Qt 5.2 and 5.0.2 works.
  * Add #include for QDebug to fix Qt 5.2 build.

  [ Christian Dywan ]
  * Split build and install steps in debian/rules.
  * Use integer Date constructor in date picker tests for Qt 5.2.
  * Run unit_x11 test cases via Xvfb and address failures. (LP:
    #1258017, #1237812, #1242646)
  * Don't redirect output of the input file in itself.
  * Don't try to deploy non-existing qml and js files. (LP: #1259228)
  * Assert textField focus, button visibility and pressed after tapping
    clear.
  * Split documentation for previously group properties. (LP: #1266842)
  * Suppress errors to work-around font error messages. (LP: #1256999)
  * ListItems.Empty's default property needs to be data not children.
    (LP: #1190509)

  [ Pete Woods ]
  * Handle the unity-action-api quit signal. (LP: #1269409)

  [ Zsombor Egri ]
  * Date picker component. Provides full date and month only picking
    functionality.
  * DatePicker test case fix, setting the minimum limit to value that is
    earlier than the date value set. (LP: #1266515)
  * Fixing state restoration when nested dynamic component properties
    are restored. (LP: #1267039)
  * Removing obsolete functionality from QuickUtils. (LP: #1266707)
  * StateSaver failure with Repeater fixed. Indirectly fixes StateSaver
    with ListView and GridView. (LP: #1267900)
  * TabBar test case failure fix for Qt5.2. (LP: #1256930)
  * InverseMouseArea API test removed, being a duplicate of the other
    InverseMouseArea tests. Connecting to th eproper enabledChanged
    signal in InverseMouseArea resolves the warning in Qt5.2 stating
    enabledChanged was overwritten in QQuickMouseArea. (LP: #1266707)
  * Panel implementation for DatePicker. Presents the DatePicker either
    in a panel covering the OSK area or in a Popover, depending on the
    form factor and presence of input method provider.
  * Layout tests now wait for the currentLayout change completion. (LP:
    #1266707)
  * Extra QQmlEngine instance removed from plugin, which seemed to cause
    some race conditions with Qt5.2. As result UbuntuColors got
    transferred from context property into singleton object, Theme's
    palette creation delayed till its first access. (LP: #1266707)
  * DateUtils test failure fix. (LP: #1273893)

  [ Florian Boucault ]
  * Ubuntu UI Toolkit Gallery: reimplemented in a cleaner way the
    respo...