Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Using ColumnLayout breaks Label wrap/resize



  • Hi all -

    Working with a QML view that goes like this:

    ColumnLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.fill: parent
    
        Label { id: heading ... }
        Label {
          id: subHeading
          Layout.alignment: Qt.AlignHCenter
          text: changeConsumablesViewModel.posterModalSubHeading;
          font: Theme.plateLabelLargeFont;
        //          fontSizeMode: Text.Fit;
        //          minimumPixelSize: 10;
        //          font.pixelSize: 72;
          color: Theme.neutralLightest
          wrapMode: Text.Wrap
        }
        Column { id: checklist }
        ...
    

    Which produces this:

    nowrap.PNG

    Everything is supposed to be centered, and in fact is centered if the text doesn't exceed a certain (currently unknown to me) length. My attempts to wrap (and I included a width) didn't work, so I tried the fontSizeMode setting (shown in the commented code above), and got this disaster:

    wrong.PNG

    Can someone tell me why this isn't resizing the subheading to fit in the window? Thanks...



  • Please see the documentation for WrapMode for Text and Label.

    Here's an excerpt:

    wrapMode : enumeration
    Set this property to wrap the text to the Text item's width. The text will only wrap if an explicit width has been set. wrapMode can be one of:



  • @VStevenP as mentioned above, I did include a width setting when I tried wrapping. I just tried it again. Here's the code:

    Label {
      Layout.alignment: Qt.AlignHCenter
      text: changeConsumablesViewModel.posterModalSubHeading;
      font.pointSize: 36.0
      width: 640
      wrapMode: Text.Wrap
    }
    

    And here's the result:
    wrong.PNG

    So, something else I'm doing (or not doing) is interfering with the wrapping.



  • Update: by process of elimination, I traced the cause to my use of ColumnLayout. Changing topic title accordingly.

    EDIT: So, it appears that the missing ingredient was a Layout.preferredWidth:

    Label {
        Layout.alignment: Qt.AlignHCenter
        text: changeConsumablesViewModel.posterModalSubHeading
        width: parent.width * 0.9
        Layout.preferredWidth: width
        fontSizeMode: Text.Fit
        minimumPixelSize: 18
        font.pixelSize: Theme.plateLabelLargeFont.pixelSize
        wrapMode: Text.Wrap
      }
    

    produces this:

    right.PNG

    I didn't realize that I needed to apply Layout properties to the individual elements of a Layout; but evidently I did.


Log in to reply