Custom TextEdit, how to hide TextInput when it goes wide

Question

I've trying to create custom text field using TextInput element (I need it to use validator and custom style). But I can't hide part of TextInput content expanding (see image). I have similar problem with other elements, while it have root item (container) what contains other items, childrens can be seen if they are placed out of container coordinates. How can I make childrens parts hidden if they're out of root container?

There is the code, but it's actually just template, I've tried to uze z attribute, with no success.

BreezeQuickLineInput.qml

import QtQuick 2.4

Item {
    id: root
    property int fontSize: 18
    property BreezeQuickPalette palette: BreezeQuickPalette
    property string text: "Type here..."
    implicitHeight: input.font.pixelSize*2
    implicitWidth: 196
    Rectangle{
        id: body
        color: "transparent"
        anchors.fill: parent
        border {
            color: palette.plasmaBlue
            width: 1
        }
        TextInput{
            id: input
            anchors {
                fill: parent
            }
            font.pointSize: fontSize
            color: palette.normalText
            selectByMouse: true
        }
    }
}

Appreciated any help. I've checked TextInput documentation, but if you know what topic I should learn please let me know.

Answer 1

Well, really wondered when found layer attribute group. I've just turned on layer.enabled and my goal was accomplished. There is some lack of info in Qt documents. Unfortunatelly didn't know the purpose of layer group previously.

BreezeQuickLineInput.qml

import QtQuick 2.4

Item {
    id: root
    property int fontSize: 18
    property BreezeQuickPalette palette: BreezeQuickPalette
    property string text: "Type here..."
    implicitHeight: input.font.pixelSize*2
    implicitWidth: 196
    Rectangle{
        id: body
        color: "transparent"
        anchors.fill: parent
        border {
            color: palette.plasmaBlue
            width: 1
        }
        TextInput{
            id: input
            anchors {
                fill: parent
            }
            font.pointSize: fontSize
            color: palette.normalText
            selectByMouse: true
            layer.enabled: true
        }
    }
}

UPDATE:

My bad, Qt doing business well. My answer was in Item description. From Qt docs:

Item Layers

An Item will normally be rendered directly into the window it belongs to. >However, by setting layer.enabled, it is possible to delegate the item and >its entire subtree into an offscreen surface. Only the offscreen surface, a >texture, will be then drawn into the window.

UPDATE:

Following by BaCaRoZzo comment using clip attribute of Item is less expensive.

clip : bool

This property holds whether clipping is enabled. The default clip value is false.

If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.

So, I just left it there, believe it can help others with same question.

Answer 2

just add clip:true inside your text input