title: QML Word wrap and TextArea and Margins
body: <p>How can i make my TextArea word wrap the text area and auto adjust it's height to show the available text in the TextArea? Secondly how can i remove the odd spacing seen in my image attached.</p>
  
  <p>This is what i have now:</p>
  
  <p><a href="https://i.stack.imgur.com/8ut0Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ut0Q.png" alt="enter image description here"></a></p>
  
  <p>This is what I desire:</p>
  
  <p><a href="https://i.stack.imgur.com/EQD3a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQD3a.png" alt="enter image description here"></a></p>
  
  <p><strong>QML Code:</strong></p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.3
  
  Frame {
      anchors.centerIn: parent
      anchors.fill: parent
  
      ListView {
          implicitWidth: parent.width
          implicitHeight: parent.height
          clip: true
  
          model: ListModel {
              ListElement {
                  description: "Wash the car this could be a really long message with some multiline support we will see how it works."
              }
              ListElement {
                  description: "Fix the car"
              }
              ListElement {
                  description: "Sell the car"
              }
              ListElement {
                  description: "Wash the car this could be a really long message with some multiline support we will see how it works. This should word wrap quite a lot of times."
              }
              ListElement {
                  description: "Fix the car"
              }
              ListElement {
                  description: "Sell the car"
              }
              ListElement {
                  description: "Wash the car"
              }
              ListElement {
                  description: "Fix the car"
              }
              ListElement {
                  description: "Sell the car"
              }
          }
  
          delegate: RowLayout {
              Layout.fillWidth: true
  
              Rectangle {
                  id: newsicon
                  width: 16
                  height: 16
                  color: "steelblue"
                  Layout.alignment: Qt.AlignTop
              }
  
              ColumnLayout {
                  Layout.fillWidth: true
                  spacing: 0
  
                  TextArea {
                      Layout.fillWidth: true
                      Layout.alignment: Qt.AlignTop
                      id: messageText
                      text: model.description
                      wrapMode: TextEdit.WordWrap
                      readOnly: true
                      textMargin: 0.0
                      background: null
                  }
                  Label {
                      id: dateText
                      text: "Dec 20, 2019"
                      font.italic: true
                      font.pointSize: 8
                      color: "grey"
                  }
              }
          }
  
          ScrollBar.vertical: ScrollBar {
              active: true
          }
      }
  }
  </code></pre>