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. How to remove unwanted space in GridLayout
Forum Updated to NodeBB v4.3 + New Features

How to remove unwanted space in GridLayout

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 4 Posters 3.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.
  • AhtiA Offline
    AhtiA Offline
    Ahti
    wrote on last edited by Ahti
    #1

    I am using GridLayout to layout my controls like this:

     GridLayout {
            anchors.fill: parent
            anchors.margins: 20
            columns: 2
            Label { text: "text_1" } Label { text: "text_2" }
            Label { text: "text_3" } Label { text: "text_4" }
            Label { text: "text_5" } Label { text: "text_6" }
        }
    

    And it gives me this output:

    0_1560521392148_qml layout.PNG

    As you can see there are lot of spaces from the top, bottom and in-between the rows of the labels I wanna remove them how would I do it ?

    I want something like this:

    0_1560521960626_qml gridlayout.PNG

    what is a signature ?? Lol

    ODБOïO 1 Reply Last reply
    0
    • AhtiA Ahti

      I am using GridLayout to layout my controls like this:

       GridLayout {
              anchors.fill: parent
              anchors.margins: 20
              columns: 2
              Label { text: "text_1" } Label { text: "text_2" }
              Label { text: "text_3" } Label { text: "text_4" }
              Label { text: "text_5" } Label { text: "text_6" }
          }
      

      And it gives me this output:

      0_1560521392148_qml layout.PNG

      As you can see there are lot of spaces from the top, bottom and in-between the rows of the labels I wanna remove them how would I do it ?

      I want something like this:

      0_1560521960626_qml gridlayout.PNG

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by ODБOï
      #2

      you set this ,
      @Ahti said in How to remove unwanted space in GridLayout:

      GridLayout {
      anchors.fill: parent

      so that is the normal behavior. If you reduce the window height you will see the result you want.
      you can wrap you GridLayout with a RowLayout like this

      
      Window {
          visible: true
          width: 640
          height: 480
          title: qsTr("Hello World")
          property string  entryDisplayText : "g.eg"
      
          Component{
              id:lab
              Label { text: "text" }
          }
      
          RowLayout{ // wraped
              anchors.fill: parent
      
              GridLayout {
                  Layout.preferredHeight: parent.height/2
                  Layout.alignment: Qt.AlignTop
                  columns: 2
                  rows : 3
      
                  Repeater{
                      model: 6
                      Loader{
                          sourceComponent: lab
                      }
                  }
              }
              /*
                  Auther Components
              */
      
          }
      }
      
      1 Reply Last reply
      1
      • Pradeep P NP Offline
        Pradeep P NP Offline
        Pradeep P N
        wrote on last edited by
        #3

        Hi @Ahti
        You can also try the sample code below.

              GridLayout {
                anchors.centerIn: parent
                columns: 3
                rows: 3
                // columnSpacing: 0
                rowSpacing: 50
        
                Repeater {
                    id: repeater
        
                    model: 6
                    Rectangle {
                        width: 200;
                        height: 50
                        border.color: "black"
                        Text {
                            anchors.centerIn: parent
                            text: qsTr("Text")
                            font {
                                bold: true
                                pointSize: 15
                            }
                        }
                    }
                }
            }
        

        Output:

        0_1560526380920_183f6e0c-7316-4277-85d4-197274b380a5-image.png

        All the best.

        Pradeep Nimbalkar.
        Upvote the answer(s) that helped you to solve the issue...
        Keep code clean.

        1 Reply Last reply
        3
        • Shrinidhi UpadhyayaS Offline
          Shrinidhi UpadhyayaS Offline
          Shrinidhi Upadhyaya
          wrote on last edited by
          #4

          Hi @Ahti ,

          • The reason why you are getting unwanted space is because you have not specified height and width to the Label,for example if you just put a dummy Rectangle inside the Label and fill it, you will see that it is not covering the complete Layout.So output will be something like this:-

          0_1560747444223_845718c6-64d7-4899-9f67-c3884121a6d3-image.png

          • If you just specify height and width to the Label,ie.,do the following code change:-

            Label {
                  Layout.fillHeight: true
                  Layout.fillWidth: true
                  text: "text_6"
                  horizontalAlignment: Text.AlignHCenter
                  verticalAlignment: Text.AlignVCenter
                  Rectangle {
                      anchors.fill: parent
                      color: "transparent"
                      border.color: "red"
                  }
              }
            

          Note:- Rectangle inside the Label is just for visual purpose.
          Sample Output:-

          0_1560747547002_1a683aa8-f1cc-4397-b1aa-7ab120f4102c-image.png

          • Code using Repeater:-

            GridLayout {
                anchors.fill: parent
                anchors.margins: 20
                columns: 2
            
              Repeater {
                  model: 6
                  Label {
                      Layout.fillHeight: true
                      Layout.fillWidth: true
                      text: "text_1"
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                      Rectangle {
                          anchors.fill: parent
                          color: "transparent"
                          border.color: "red"
                      }
                   }
                }
             }
            

          The sample output of this will be same as shown in point 2.

          Note:- You can remove the Rectangle inside the Label, its just for your visual purpose.

          Shrinidhi Upadhyaya.
          Upvote the answer(s) that helped you to solve the issue.

          1 Reply Last reply
          3

          • Login

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