⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

Lock children inside parent

  • Hi.

    I'm trying to make a drop down animation. I face the problem that the child rectangle is showed on top, and hence outside the parent rectangle. Is it not possible to have the children "inside" the parent??

    In the below code, the redRect is always visible. The animation works fine (except the fact that the red square is always shown).

    @import QtQuick 2.0

    Rectangle {
    width: 100
    height: 10

    Behavior on height { NumberAnimation { easing.type: Easing.OutQuad; duration: 400 } }
    function hide()
        height = 0;
    function show()
        height = childrenRect.height
    Rectangle {
        id: redSquare
        width: 50; height: 50
        color: "red"


  • Solved this issue by adding a dummy rectangle that anchors to the bottom of the "dowp down" (in the qml file that uses the above "dropdown" file).

    YES that's right - it now works :)

  • Hi Hykkel,

    If I understand right, what your are looking for is the "clip" property. It ensures that children are visible only inside parent surface.

    import QtQuick 2.0

    Rectangle {
    clip: true

    Note that this clipping test costs CPU usage.


  • That was it!!

    Thanks a lot... I sure did hate that dummy rectangle hack I made!

Log in to reply