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.
Comments
Post a Comment