How to make a TextArea have a max size and a scroll bar?

Question

I have a TextArea that will usually only contain about one line of text. I do, however, want the user to be able to add more than that and have the TextArea expand up to a maximum of about 15 lines, at which point any additional text can be accessed via a scroll bar. I've been able to get the scrolling aspect working by having the TextArea be contained in a Flickable (which is ultimately contained in a Rectangle).

Rectangle {
    id: rec
    width: 200
    height: 25

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: textArea.width
        contentHeight: textArea.height

        TextArea.flickable:
            TextArea {
            id: textArea
            text: qsTr("Hello, world!")
            wrapMode: Text.WordWrap
        }
        ScrollBar.vertical: ScrollBar { }
    }
}

At this point, how would I go about having the text box expand with the text until some pre-defined max number of pixels (say, 300)?

Edit

Alright, almost there, just having one problem with getting the text to center properly with Mitch's solution. My main.qml file contains the following:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

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

    HelloWorld{
        anchors.centerIn: parent
    }
}

Any my HelloWorld.qml file contains the following:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.4

ColumnLayout{

    width: 250

    FontMetrics {
        id: fontMetrics
        font: textArea.font
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, fontMetrics.height * 15)
        contentWidth: width
        contentHeight: textArea.implicitHeight
        clip: true

        TextArea.flickable: TextArea {
            id: textArea
            text: "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
                + "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
            wrapMode: Text.WordWrap
            //padding: 0

            background: Rectangle {
                border.color: "blue"
            }
        }
        ScrollBar.vertical: ScrollBar {}
    }

}

This is very close to working, but for one reason or another, when I have this code outside of main.qml, the text gets shifted lower and to the right until the user selects it:

After selecting the text, it looks like this (which is what I want it to start at):

Mitch · Accepted Answer · 2019-02-04T22:38:03.300

Set the height of the Flickable to be contentHeight or 300 - whichever is smaller:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 400
    height: 400
    color: "#444"
    visible: true

    Rectangle {
        anchors.fill: flickable
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, 300)
        contentWidth: width
        contentHeight: textArea.implicitHeight

        TextArea.flickable: TextArea {
            id: textArea
            text: qsTr("Hello, world! Hello, world! Hello, world! Hello, world! ")
            wrapMode: Text.WordWrap
        }
        ScrollBar.vertical: ScrollBar {}
    }
}

If you don't want the Rectangle to be where it is (a sibling of Flickable), you can remove it, add

clip: true

to the Flickable and

background: Rectangle {}

to the TextArea.

Also, if you want to be a bit more precise, you can use FontMetrics to calculate the line height:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 400
    height: 400
    color: "#444"
    visible: true

    FontMetrics {
        id: fontMetrics
        font: textArea.font
    }

    Flickable {
        id: flickable
        width: parent.width
        height: Math.min(contentHeight, fontMetrics.height * 15)
        contentWidth: width
        contentHeight: textArea.implicitHeight
        clip: true

        TextArea.flickable: TextArea {
            id: textArea
            text: "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
                + "Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! Hello, world! "
            wrapMode: Text.WordWrap
            padding: 0

            background: Rectangle {}
        }
        ScrollBar.vertical: ScrollBar {}
    }
}

Great solution, just a follow-up question: If I try to use your code in a file separate from the one containing the ApplicationWindow, the text starts out shifted outside of the rectangle until it gets selected. I've edited my question to contain how I've coded it. Any idea what's causing this? — Kiwi, Feb 05 '19 at 16:51
Hmm, I think it's the padding. Setting `leftPadding: 0`, `rightPadding: 0`, etc. helps. Off the top of my head, I'm not sure why it behaves that way though... by the way, you can use this to help visualise the `contentItem`: `Component.onCompleted: Qt.createQmlObject("import QtQuick 2.0; Rectangle { width: parent.width; height: parent.height; color: '#aaff0000'; }", flickable.contentItem);` (add it to the body of the `Flickable`). — Mitch, Feb 05 '19 at 18:29
Thanks, setting the padding to zero does help, although if you want nonzero padding the problem persists. I've noticed that if I set the `width` of the `Flickable` with a number instead of grabbing it from the `ApplicationWindow` (ie. using `400` instead of `parent.width`), that seems to trigger the problem. Once I move the `Flickable` outside the application window, I lose access to that field. Weird. — Kiwi, Feb 05 '19 at 18:54
Another interesting thing: if I use your code to visualize the problem, it seems that the padding is happening separately between the `Flickable` and the `TextArea`(if I set the padding on the left to 10, the `TextArea` starts out 10 pixels to the right of the edge of the `Flickable`, then resets when I start editing it) — Kiwi, Feb 05 '19 at 18:57

score 1 · Answer 2 · answered Feb 04 '19 at 22:31

Aha! After much searching, I finally found a handy property called paintedHeight that's part of TextArea. This will get the height of the text in your TextArea, so I used this to find that the size of each line is 13 and simply update the height of the base Rectangle whenever the text is edited, and simply capping it with an if statement. Here's my wacky solution:

Rectangle {
    property int paintedHeight: 13
    id: rec
    width: 200
    height: paintedHeight * 2

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: textArea.width
        contentHeight: textArea.height

        TextArea.flickable:
            TextArea {
            id: textArea
            wrapMode: Text.WordWrap

            property int maxNumberOfLines: 15
            onTextChanged: {
                rec.height = (lineCount * rec.paintedHeight) + rec.paintedHeight

                // cap the height so that the box stops expanding at maxNumberOfLines
                if(rec.height > rec.paintedHeight * (maxNumberOfLines + 1)){
                    rec.height = rec.paintedHeight * (maxNumberOfLines + 1)
                }
            }
        }
        ScrollBar.vertical: ScrollBar { }
    }
}

In case anyone else finds themselves in a similar situation, just execute console.log(paintedHeight) to get the height of the current text (and divide accordingly if you have more than one line) to get the height of your text, as it may be different than mine depending on the style and font you're using (I'm using the Fusion style). Then just modify the paintedHeight property in the Rectangle with your size and the maxNumberOfLines property in the TextArea with the maximum number of lines you want the text to have.

How to make a TextArea have a max size and a scroll bar?

2 Answers2