QML TextArea : Wrapping placeholder text

Tummon

Hi all,

Just wondering if there is a recommended way of getting the placeholder text of a TextArea to word wrap?
I assume it will have to be some combination of TextMetrics and manually calculating where to add new line characters?
(My google and forum/doc searches are not proving very fruitful)

Thanks!

Markkyboy

Try the following;

import QtQuick 2.5    
import QtQuick.Window 2.2    
import QtQuick.Controls 2.15
        
Window {    
    width: 300    
    height: 300    
    visible: true
       
    Text {    
        id: textEdit    
        width: 200    
        height: 50
   
        property string placeholderText: "Enter text here..."
        
        TextArea {
            text: textEdit.placeholderText
            color: "#aaa"
            visible: !textEdit.text
            wrapMode: Text.WordWrap    
            width: parent.width // set width to be used in TextEdit    
        }    
    }    
}

Tummon

Ah nice, will have to reimplement some functionality around clearing the placeholder text on input etc. but I think that's better than messing about with TextMetrics!
Thanks!

Tummon

A little tweaking and this works nicely:

TextArea {
    id: textArea
    property alias customPlaceholderText: innerPlaceholderText.text
    property alias customPlaceholderTextColor: innerPlaceholderText.color
    anchors.fill: parent
    customPlaceholderText: qsTr("Place Holder Text Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong")
    //customPlaceholderTextColor: "#aaa" //this property alias doesn't seem to work? 5.15.2
    wrapMode: Text.WrapAnywhere

    Text{
        id: innerPlaceholderText
        visible: !textArea.text

        anchors.leftMargin: textArea.leftPadding
        anchors.rightMargin: textArea.rightPadding
        anchors.topMargin: textArea.topPadding
        anchors.bottomMargin: textArea.bottomPadding
        anchors.fill: parent
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignTop
        wrapMode: textArea.wrapMode
        color: "#aaa"
    }
}

Qml_beginner

its works fine independently but this way we are not actually using placeholder text, is there some way we can wrap the placeholder text explicitly