QML change height of item with respect to change in height of item below it

Question

I have a listview and a textarea below it. I want that the height of listview increases or decreases with respect to the size of the textarea. I tried anchoring the bottom of listview to the textarea's top, didn't work. Then I tried anchoring the top of textarea to the bottom of listview, didn't work either. Tried both together, neither that. Everytime it gives the runtime error/warning of Binding loop detected for property "height" I also tried this in textarea's scope, yet I have the same runtime error/warning and no results:

onTextChanged: {
            listView.anchors.bottomMargin = height;
        }

How can I achieve this?

Here's the code:

    ListView{
    id: listView
//        anchors.fill: parent
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0
    anchors.margins: 10
    delegate: ChatMessageItem{}
    model: listModel
    spacing: 15
}

Rectangle{
    id: rectInput
    height: childrenRect.height + 6
    width: parent.width
//        anchors.top: listView.bottom
    anchors.bottom: parent.bottom
    color: "#BDC3C7"
    TextArea{
        id: tMsg
        placeholderText: qsTr("Enter message")
        width: parent.width - 30
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        anchors.left: parent.left
        anchors.leftMargin: 1
        focus: true
        wrapMode: TextArea.Wrap
        background: Rectangle {
            border.color: "#BDC3C7"
            border.width: 2
            color: "#ECF0F1"
        }
        onTextChanged: {
            listView.anchors.bottomMargin = height;
        }
    }
}

You shouldn't have deleted your answer. It worked for me. The problem was my listview wasn't getting scrolled to bottom which made me think it didn't work. I fixed that. I still get the binding loop error though. @coyotte508 — Akash Agarwal
@coyotte508 maybe I can see your answer again to see the binding loop problem and accept it as well. — Akash Agarwal

coyotte508 coyotte508 · Accepted Answer · 2016-06-06T20:21:48

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width : 500
    height: 300

    ListModel {
        id: contactModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 80
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }


    ListView {
        id: listView
        anchors.top: parent.top;
        anchors.left: parent.left;
        anchors.right: parent.right;
        anchors.bottom: rectInput.top;

        model: contactModel
        delegate: contactDelegate
    }

    Rectangle{
        id: rectInput
        height: tMsg.height+4;
        color: "#BDC3C7"
        anchors.bottom: parent.bottom
        width: parent.width

        TextArea{
            id: tMsg

            width: parent.width - 2
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.left: parent.left
            anchors.leftMargin: 1
            focus: true
            wrapMode: TextArea.Wrap
        }
    }
}

A sample qml file works fine. When in doubt, simplify, fix the problem and add back bit by bit.

In your code:

height: childrenRect.height + 6

I don't see childrenRect defined anywhere. Maybe replacing it by tMsg.height and anchoring the list's bottom to the rectangle's top would work? It works in my sample file (I can't use your code word-for-word because it's not complete on its own). Replacing childrenRect by tMsg removes the binding loop error for me.

By the way: I put the bottom of the list view to the rect's top, not to the text area's top which is inside the rect:

anchors.bottom: rectInput.top

An alternative would be to do in the list view:

anchors.bottom: parent.bottom
anchors.bottomMargin: tMsg.height

Apart from a warning at launch when the text view is not yet created, it works fine too.

QML change height of item with respect to change in height of item below it

1 Answers