QML TumblerColumn width exceeds ColumnLayout geometry

I have following QML Tumbler:

import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1

import "../items"

Rectangle
{
    id: ueNumericTumbler

    color: "grey"

    ColumnLayout
    {
        id: ueMainLayout

        anchors.rightMargin: parent.radius
        anchors.leftMargin: parent.radius
        anchors.bottomMargin: parent.radius
        anchors.topMargin: parent.radius
        anchors.centerIn: parent

        antialiasing: true
        spacing: 4
        anchors.fill: parent
        layoutDirection: Qt.LeftToRight

        Tumbler
        {
            id: ueLoginKeypadTumbler

            antialiasing: true

            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.fillHeight: false

            Layout.minimumWidth: parent.width
            Layout.minimumHeight: parent.height*70/100

            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height*70/100

            Layout.maximumWidth: parent.width
            Layout.maximumHeight: parent.height*70/100

            activeFocusOnTab: false

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit1000

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit100

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit10

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit1

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn
        }   // Tumbler
    }   // ColumnLayout

}   // Rectangle

Now, as you can see in screenshot, Tumbler Columns width is greater than parent's, ColumnLayout geometry, which is wrong. What did I miss? I've taken into acount ueNumericTumbler's ColumnLayout but the problem persits, I do not know what to do! Should I use anchors? Or is it maybe problem in ueNumericTumbler's parent contaniner rectangle/window, named ueKeypad:

import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1

import "../delegates"
import "../items"

Rectangle
{
    id: ueKeypad

    width: 512
    height: 384
    color: "grey"
    radius: 8
    border.color: "steelblue"
    border.width: 4

    ColumnLayout
    {
        id: ueMainLayout

        anchors.rightMargin: parent.radius
        anchors.leftMargin: parent.radius
        anchors.bottomMargin: parent.radius
        anchors.topMargin: parent.radius
        anchors.centerIn: parent

        antialiasing: true
        spacing: 4
        anchors.fill: parent
        layoutDirection: Qt.LeftToRight

        UeNumericTumbler
        {
            id: ueLoginKeypadTumbler

            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.fillHeight: false

            Layout.minimumWidth: parent.width
            Layout.minimumHeight: parent.height*70/100

            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height*70/100

            Layout.maximumWidth: parent.width
            Layout.maximumHeight: parent.height*70/100
        }   // UeNumericTumbler
    }   // ColumnLayout

    states:
    [
        State
        {
            name: "ueStateLoginOk"

            PropertyChanges
            {
                target: ueKeypad
                border.color: "#00ff00"
            }
        },

        State
        {
            name: "ueStateLoginOkFailed"
            PropertyChanges
            {
                target: ueKeypad
                border.color: "#ff0000"
            }
        }
    ]
}

You're using the Layout attached property on the wrong object; Layout.preferredWidth was only set on the Tumbler, not the TumblerColumn. You can debug this by adding a print() line before the return statement of the expression:

TumblerColumn
{
    model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    width: {
        print(Layout.preferredWidth)
        Layout.preferredWidth/4
    }
}

This prints -1, which is the default value. You can set the width to this instead:

ueLoginKeypadTumbler.Layout.preferredWidth / 4

You'll need to account for the width of the separators though... ugh. This is not very nice. Please open a bug report that mentions that this use case should be easier.