TextArea problematic background QML QT

Question

Trying different code combinations and partially solving my problem I came across a behavior that I can not quite explain. So to the point, When I create a simple TextArea without Scrollview it looks like this:

enter image description here

RowLayout  {
    id: rowLayout
    Rectangle{                       
        height: 50
        width: 295
        TextArea {
            id: textArea
            text: (" message...")
           wrapMode: Text.WrapAnywhere
           anchors.fill: parent
        }                
    }

Text area creates a default background. And now I want to do TextArea with ScrollView ALSO with the default TextArea background but it comes out something like that :

enter image description here

RowLayout  {
    id: rowLayout
    Rectangle{
       height: 50
        width: 295
    ScrollView {
       id: scrollView1
        anchors.fill: parent

    TextArea {
            id: textArea
            text: (" message...")
           wrapMode: Text.WrapAnywhere                           
        }
    }
}

The only chance to set the default TextArea background is set implicitHeight,implicitWidth but then after entering the text into a TextArea until the scrollbar appears, the background extends over the entire length by going behind the other components like this :

enter image description here

RowLayout  {
    id: rowLayout
    Rectangle{
        //color: "#00000000"
       height: 50
        width: 295
    ScrollView {
       id: scrollView1
        anchors.fill: parent
    TextArea {
            id: textArea
            text: (" message...")
           wrapMode: Text.WrapAnywhere
              implicitHeight: 50
              implicitWidth: 295
        }
    }
}

So the only thing I want is a scrollable textarea but with this black default background and NOT my background which I can do with rectangle. Can anyone take a look? Thank you :)

freakMeduza · Answer 1 · 2018-12-18T08:37:24.017

I tried do my best. Check the example below, hope it will help =)

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true

    width: 400
    height: 400

    RowLayout {
        width: 295
        height: 50

        anchors.centerIn: parent

        ScrollView {
            Layout.fillHeight: true
            Layout.fillWidth: true

            background: Rectangle { color: "black" }

            TextArea {
                id: messageField

                placeholderText: qsTr("message...")

                color: "white"

                wrapMode: TextArea.WrapAnywhere
            }
        }
    }
}

Result:

TextArea problematic background QML QT

1 Answers1