Hi @Kyeiv ,
I didn't realize that you wanted the elements of each line to line up with each other. In this case you can use GridLayout:

import QtQuick import QtQuick.Window import QtQuick.Controls import QtQuick.Layouts Window { GridLayout { anchors.fill: parent columns: 3 //rows: 5 Text { Layout.fillWidth: true text: "Text1a Looooooooog" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text1b" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text1c" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Item { Layout.columnSpan: 3 Layout.fillWidth: true height: 10 Rectangle { height: 1 width: parent.width anchors.centerIn: parent color: "grey" } } Text { Layout.fillWidth: true text: "Text2a" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text2b Looooooooog" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text2c" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } ´ Item { Layout.columnSpan: 3 Layout.fillWidth: true height: 10 Rectangle { height: 1 width: parent.width anchors.centerIn: parent color: "grey" } } Text { Layout.fillWidth: true text: "Text3a" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text3b" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } Text { Layout.fillWidth: true text: "Text3c Looooooooog" horizontalAlignment : Text.AlignHCenter elide: Text.ElideRight } } }

80bb60b9-e0d8-4200-9aff-b91995e3daf7-image.png
da6d1565-5132-45f8-bd56-95be08ea8f2f-image.png

@raven-worx i cannot specify Layout.alignment in string creating Text because i get error that this property doesn't exist

Hey,

If this is a direct copy of your code there is a few typos..
id name needs to be id:name.

Also you cannot link your customrowlayout alias to the item reference which is outside your custom component..

"Unlike an ordinary property, an alias has the following restrictions:

It can only refer to an object, or the property of an object, that is within the scope of the type within which the alias is declared.
It cannot contain arbitrary JavaScript expressions
It cannot refer to objects declared outside of the scope of its type.
The alias reference is not optional, unlike the optional default value for an ordinary property; the alias reference must be provided when the alias is first declared.
It cannot refer to attached properties.
It cannot refer to properties inside a hierarchy with depth 3 or greater. "

Look here:
https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#property-aliases

So you need to do it like this, or simlar :)

Item{ id:item Component { id:componentRow Row { id:someRow Rectangle { width:500 height:20 color:"#ff1111" property Item context:item Text { anchors.horizontalCenter: parent.horizontalCenter text: "Some text.." } } } } Loader{ id: loaderr sourceComponent:componentRow } }

In case anyone else has this problem, adding this to the RowLayout does the trick:

Rectangle { height: rowLayout.childrenRect.height }

The Rectangle by default has 0 width, and the RowLayout's childrenRect.height property has the value we're after, i.e. the maximum height of its children, visible or not. Bit of a hack, obviously.