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 create a very strange problem by inserting a line on bottom side of control that, apparently, can not be removed.



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. 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