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

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