qt.labs.controls - Pane in Pane problem

ekkescorner

Qt 5.6.0 - labs.controls - Material style - Android / iOS

while preparing a sample app for my blog http://j.mp/qt-x
I run into a problem / question

my page has this structure:

ApplicationWindow
    Pane
        ColumnLayout
            controls
            Switch
            Pane
                ColumnLayout
                    controls
            more controls

ColumnLayouts needed because controls must resize (portrait-landscape)

inner Pane only visible if switch checked
because I don't want to set visble on all controls, I want to place them inside a Container

qt.labs.controls provides some Container and I tried using a Pane which is a labs.controls Container
it works well, but there's not all space available - some pixels at left and right are missing:
https://app.box.com/s/3wehxjir525j0cmbhmwlft8emhqtju0d

using a Column instead of Pane all is ok:
https://app.box.com/s/27yvi9dibzxgkp20pi68wb1p928e5exo

So I have a workable solution, but don't understand why Pane in Pane doesn't work
Am I doing anything wrong with my nested Panes ?
Want to explain the structure and want to use as much as possible from labs.controls

here's some simplified code:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    qputenv("QT_LABS_CONTROLS_STYLE", "material");
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

and qml:

import QtQuick 2.6
import QtQuick.Layouts 1.3
import Qt.labs.controls 1.0
import Qt.labs.controls.material 1.0

ApplicationWindow {
    id: appWindow
    title: "Snippets"
    visible: true
    Material.theme: Material.Light
    Material.primary: Material.BlueGray
    Material.accent: Material.Teal

    Pane {
        anchors.fill: parent
        ColumnLayout {
            anchors.right: parent.right
            anchors.left: parent.left
            Label {
                text: "first Labeltext"
            }
            Switch {
                id: theSwitch
            }

            Pane {
                visible: theSwitch.checked
                anchors.left: parent.left
                anchors.right: parent.right
                ColumnLayout {
                    anchors.right: parent.right
                    anchors.left: parent.left
                    Label {
                        text: "another Labeltext"
                    }
                }
            }

            Label {
                text: "last Labeltext"
            }
        }
    }
}

ekkescorner

found it

for the inner Pane I had to set

Pane {
                    leftPadding: 0
                    rightPadding: 0

now all content from inner Pane is justified to content from outer Pane :)

found out that by default the Pane has a padding of 6