QT Text.WordWrap not working inside ColumnLayout

Question

I am developing application using QT QML. I am facing one strange issue with QML. I want to divide and display long text using QML. I am using QT Text element to perform this task. I want to place this Text inside QT Columnlayout with other UI elements. I am not able to display long text as Multi line text. Please help me to solve this problem. Here is my QML code.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "#18d28a"

    ColumnLayout{
        id: base_coloumn_layout
        width: parent.width
        Layout.margins: 10

        Text {
            id: application_instruction
            width: 640
            text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
            color: "#000000"
            font.pointSize: 12
            wrapMode: Text.WordWrap
        }
    }
}

Same element is working properly when placed outside ColoumnLayout. I am able to display Text as multi line with code bellow. I want same code should work as Child of ColoumnLayoutas there will be few more elements inside ColoumnLayout

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "#18d28a"

    Text {
        id: application_instruction
        width: 640
        text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
        color: "#000000"
        font.pointSize: 12
        wrapMode: Text.WordWrap
    }
}

What is wrong with ColoumnLayout. Am i missing any property value to set. Please help

Answer 1

Inside a ColumnLayout, width properties are ignored.

Instead set Layout.preferredWidth or Layout.maximumWidth attached properties of the Text element.

If you want an item to fill the width of the ColumnLayout, you can set the Layout.fillWidth attached property to true.