Congratulations to our 2022 Qt Champions!

[Solved] Expand item to take maximum available place in a Row

  • Hi,

    I did try a search on the forums, but could not find any answer - maybe just because I did not use the right terms, so if this question is already answered please just point me to the right thread :)

    What I want is to have an item inside a Row to take up as much place as possible, so I do not have to worry about taking it correct size if the window is resized. I tried some settings with anchors but these did turn up with no results so far.

    May layout is like this:

    anchors.fill: parent
    id: title
    text: "Connection suceeded."
    color: '#99CC32'
    textcolor: "#ffffff"

            spacing: 10
            anchors.left: parent.left
            anchors.right: parent.right
                color: 'red'
                color: 'green'


    As you see I want the green and red Rectangle inside the Row to use up the whole available space. I'd be very grateful for any hints on this.

    Thanks in advance!

    FYI: Caption is a custom type.

  • I think you are looking for:
    @anchors.fill: parent@

  • Thanks for your reply. I tried that already but it ended up in showing no Rectangles at all. I seems like the Rectangles are only displayed if I assign them a width and height. Currently I'm using a workaround by setting those settings to some value derived from the window size - but that's pretty much not what I want to do.

  • You tried to edit the qml with qrcreator editor?

  • I usually use QtCreator for editing - but I don't get how the choice of editor should alter the effects of my QML?

  • Everything looks ok, but there is something important that you have to watch. Which parent has width and height set? if no parent has no size it is not correct.


  • I thought so already. So there seems no posibillity to let the elements arrange them selfs. Good to know :)

    Thanks for all your replies. The UI is now displayed as I wanted it to - I only needed to define a width in one of the row elements and the others - I am actually using more than two - is assigned dynamically by the anchor definitions.

  • I have created a component to layout items in a row taking full available space, considering the margins of the row and the set spacing. It was really easy, here it is:

    @// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    import QtQuick 1.1

    Row {
    id: root

    function __update() {
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            child.height = root.height
            child.width = ( root.width - ( (children.length - 1) * spacing ) ) / children.length
    onChildrenChanged: __update()
    onVisibleChanged: __update()
    onWidthChanged: __update()


    With this implementation items must have same widths.

Log in to reply