[Interest] qt.labs.controls - Flickable - Pane - Label: max width problem

[J-P Nurmi]

> On 11 May 2016, at 21:41, ekke <ekke at ekkes-corner.org> wrote:
> 
> Qt 5.7 Beta, Android 6.0.1, BlackBerry PRIV
> 
> qt.labs.controls, Material
> 
> Given this (simplified) code:
> 
> ApplicationWindow {
>    Flickable {
>        contentHeight: root.implicitHeight
>        anchors.fill: parent
>        Pane {
>            id: root
>            anchors.fill: parent
>            ColumnLayout {
>                anchors.right: parent.right
>                anchors.left: parent.left
>                // some controls
>                Label {
>                    Layout.maximumWidth: parent.width
>                    text: "Display4: 112 px"
>                    font.pixelSize: 112
>                    opacity: 0.54
>                }
>            }
>        }
>    } 
> } 
> 
> ApplicationWindow covers the complete screen of my android device.
> 
> I need a flickable Pane containing a ColumnLayout to resize controls if
> orientation changes.
> 
> All worked OK.
> 
> Then I added some Label for the different Font Sizes from Google Material
> 
> The text of Label for Display 4 with 112 px doesn't fit into screen
> size. Instead of cutting the text, Qt resizes to a width where the Label
> fits.
> 
> Side effect: all other UI Controls placed at the right side weren't
> visible anymore.
> 
> Adding wrapMode WordWrap didn't help.
> 
> Only workaround helping was to add Layout.maximumWidth: parent.width to
> all Label controls where the text is out of bounderies.
> 
> Then Text outside was "cut" or if using WordWrap goes into the next line.
> 
> -------
> 
> Did I something wrong, is this expected behaviour or should I open a
> bugreport ?
> 
> ekke

By default, a vertical ColumnLayout doesn’t resize children horizontally (but it calculates the required implicit width to fit all children), and a horizontal RowLayout doesn’t resize children vertically (but it calculates the required implicit height to fit all children). If you want ColumnLayout and RowLayout to resize the children to fill width and height, respectively, you can use the “Layout.fillWidth: true” and “Layout.fillHeight: true” attached properties for the children. For Label you have basically two options to choose from: eliding (eg. "elide: Label.ElideRight") or wrapping (eg. "wrapMode: Label.Wrap”).

--
J-P Nurmi