CODEWITHSUNDEEP
c++qtqml
Swapnil
Swapnil

Reputation: 2502

QT Text.WordWrap not working inside ColumnLayout

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

Upvotes: 10

Views: 5648

Answers (2)

Mark Ch
Mark Ch

Reputation: 3030

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.

Upvotes: 14

Swapnil
Swapnil

Reputation: 2502

From the Answer given by Mark, we can change qml as given bellow and we can display multi line text.

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

ApplicationWindow {
    id: application_window
    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: application_window.width
            Layout.preferredWidth: application_window.width
            text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
            color: "#000000"
            font.pointSize: 12
            wrapMode: Text.WordWrap
        }
    }
}

Upvotes: 0

Related Questions