QML Snippet: Flickable TextArea and Material style problem


Make a TextArea control flickable is a very easy task using new version 2 of QtQuick controls. However when Material style was applied it show a line on bottom side of control that, in case of full window edit control, is not so good to view.



The snippet code for create a flickable TextArea control is the following:

Flickable {
    id: flickable
    anchors.fill: parent
    flickableDirection: Flickable.VerticalFlick

    TextArea.flickable: TextArea {
        id: textArea
        wrapMode: TextArea.Wrap
    }

    ScrollBar.vertical: ScrollBar {}
}

This code will work as expected if no style is applied. However if you apply the Material style the control show as below:


As you can see there is a line on bottom colored as Material accent color that seem to reduce the high of TextAera control. This is a very annoying effect caused by the style settings that, in case of an edit control expanded on full window (like the example) is not so good to see. For restore the normal aspect of the control cancelling the unwanted effect of style you have to include the additional settings in red as follow:

Flickable {
    id: flickable
    anchors.fill: parent
    flickableDirection: Flickable.VerticalFlick

    TextArea.flickable: TextArea {
        id: textArea
        wrapMode: TextArea.Wrap
        leftPadding: 6
        rightPadding: 6
        topPadding: 0
        bottomPadding: 0
        background: null
    }

    ScrollBar.vertical: ScrollBar {}
}

Now the control should show normal as expected.

0 Comments:

Post a Comment