Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Text wrapping inside GridLayout
Forum Updated to NodeBB v4.3 + New Features

Text wrapping inside GridLayout

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 1 Posters 1.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    PetrM
    wrote on last edited by
    #1

    Hello,
    I have a trivial problem: I need to wrap a Text item (it's id: someText in the following code) inside a GridLayout. The code:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.1
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Text wrapping")
    
        RowLayout
        {
            anchors.fill: parent
    
            Rectangle
            {
                id: leftPanel
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.minimumWidth: 150
                Layout.maximumWidth: 400
                Layout.preferredWidth: 300
    
                ColumnLayout
                {
                    anchors.fill: parent
                    GridLayout
                    {
                        anchors.fill: parent
                        columns: 2
    
                        Text
                        {
                            id: label
                            text: "Label:"
                        }
                        Text
                        {
                            id: someText
                            text: "Some text ............................................"
                            wrapMode: Text.WrapAnywhere
                            //Without the following line the wrapping does not work at all
                            Layout.maximumWidth: 150
                        }
                    }
                }
            }
            Rectangle
            {
                id: rightPanel
                color: "red"
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumWidth: 300
            }
        }
    }
    

    What is my problem: If I resize the window then I expect the "someText" item be ALWAYS wrapped at the right side of the "leftPanel". But to make work the wrapping I have to define Layout.maximumWidth inside the Text{id: someText} item, otherwise the wrapping does not work at all. Unfortunatelly defining the Layout.maximumWidth causes the "someText" be always wrapped by width of 150 :-( regardless of the width of the "leftPanel". See the screenshots below.

    How to make the "someText" be wrapped correctly?

    Thank you.

    Wide window
    Narrow window

    1 Reply Last reply
    0
    • P Offline
      P Offline
      PetrM
      wrote on last edited by
      #2

      I'm sorry, I don't know how could I miss the Layout.fillWidth :)

      So I solved it by the following definition of my Text to be wrapped:

      Text
      {
        id: someText
       text: "Some text ............................................"
       wrapMode: Text.WrapAnywhere
      //this line made the "magic"
       Layout.fillWidth: true 
      }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved