How do I elide Rectangle that is wider than its parent Rectangle?

[mirro]

[ebatsin]

Elision is only related to text.

If you want to "hide" the part of a rectangle that overflows out of its parent, you can use the clip property:

Rectangle {
    width: 50
    height: 50
    clip: true

    Rectangle {
        width: 100
        height: 100
    }
}

Note that using clip should be your last solution, on big items, this can be bad for performances.

Instead you should try to prevent your child item from being bigger than its parent so you don't have to use clip.

[Allon]

Hi,
Why do you not write
width: parent.width ?
Regards,
Emmanuel

[mirro]

@Allon Is there a similar elide:Text.ElideRight method?

[ebatsin]

Elision is only related to text.

If you want to "hide" the part of a rectangle that overflows out of its parent, you can use the clip property:

Rectangle {
    width: 50
    height: 50
    clip: true

    Rectangle {
        width: 100
        height: 100
    }
}

Note that using clip should be your last solution, on big items, this can be bad for performances.

Instead you should try to prevent your child item from being bigger than its parent so you don't have to use clip.

[Allon]

@mirro Hi,
Your question was not "how to elide a rectangle but, how do I elide the text contained in a rectangle? Am I right?
Regards