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

Text wrapping inside GridLayout

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 1 Posters 2.0k 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