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 do i make ColumnLayout draw items directly under each other

How do i make ColumnLayout draw items directly under each other

Scheduled Pinned Locked Moved Solved QML and Qt Quick
columnlayoutspacingorder
12 Posts 4 Posters 1.3k Views
  • 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.
  • G Offline
    G Offline
    GrecKo
    Qt Champions 2018
    wrote on 19 Jun 2020, 13:25 last edited by
    #2

    ColumnLayout has a spacing property that is not 0 by default.
    add spacing: 0

    K 1 Reply Last reply 20 Jun 2020, 20:55
    0
    • G GrecKo
      19 Jun 2020, 13:25

      ColumnLayout has a spacing property that is not 0 by default.
      add spacing: 0

      K Offline
      K Offline
      Kyeiv
      wrote on 20 Jun 2020, 20:55 last edited by
      #3

      @GrecKo please chceck my code. I have used spacing: 0 but it didn't help.

      1 Reply Last reply
      0
      • K Offline
        K Offline
        Kyeiv
        wrote on 25 Jun 2020, 09:27 last edited by
        #4

        i have not came across any solution searching through documentation

        J 1 Reply Last reply 25 Jun 2020, 10:33
        0
        • K Kyeiv
          25 Jun 2020, 09:27

          i have not came across any solution searching through documentation

          J Offline
          J Offline
          J.Hilk
          Moderators
          wrote on 25 Jun 2020, 10:33 last edited by
          #5

          @Kyeiv add a 3rd Item with Layout.fillHeight: true


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          K 1 Reply Last reply 29 Jun 2020, 06:54
          0
          • J J.Hilk
            25 Jun 2020, 10:33

            @Kyeiv add a 3rd Item with Layout.fillHeight: true

            K Offline
            K Offline
            Kyeiv
            wrote on 29 Jun 2020, 06:54 last edited by
            #6

            @J-Hilk it doesn't seem to help, i added:

            Rectangle
            {
            	id: filler
            	Layout.fillHeight: true
            	Layout.fillWidth: true
            	Layout.preferredWidth: 500
            	Layout.minimumWidth: 100
            	color: "red"
            }
            

            and this rectangle only covers small part of the bottom of the layout.

            now the column looks like that:
            title of list1
            item1
            item2
            item3
            black_space
            black_space
            black_space
            title of list2
            item1
            item2
            item3
            black_space
            black_space
            black_space
            small red rectangle.

            I want to get rid of those black_space

            J 1 Reply Last reply 29 Jun 2020, 06:56
            0
            • K Kyeiv
              29 Jun 2020, 06:54

              @J-Hilk it doesn't seem to help, i added:

              Rectangle
              {
              	id: filler
              	Layout.fillHeight: true
              	Layout.fillWidth: true
              	Layout.preferredWidth: 500
              	Layout.minimumWidth: 100
              	color: "red"
              }
              

              and this rectangle only covers small part of the bottom of the layout.

              now the column looks like that:
              title of list1
              item1
              item2
              item3
              black_space
              black_space
              black_space
              title of list2
              item1
              item2
              item3
              black_space
              black_space
              black_space
              small red rectangle.

              I want to get rid of those black_space

              J Offline
              J Offline
              J.Hilk
              Moderators
              wrote on 29 Jun 2020, 06:56 last edited by
              #7

              @Kyeiv
              mmh, do you have a compellable minimal example ?


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              K 1 Reply Last reply 29 Jun 2020, 07:28
              0
              • J J.Hilk
                29 Jun 2020, 06:56

                @Kyeiv
                mmh, do you have a compellable minimal example ?

                K Offline
                K Offline
                Kyeiv
                wrote on 29 Jun 2020, 07:28 last edited by
                #8

                @J-Hilk this is how it looks like with rectangle added:

                exampleColLay.png

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Markkyboy
                  wrote on 29 Jun 2020, 08:11 last edited by
                  #9

                  Why not paste some working code?, you want help don't you?, then give us some working code to play with instead of leaving us to guess at what you are trying to achieve.

                  Don't just sit there standing around, pick up a shovel and sweep up!

                  I live by the sea, not in it.

                  K 1 Reply Last reply 29 Jun 2020, 08:26
                  1
                  • M Markkyboy
                    29 Jun 2020, 08:11

                    Why not paste some working code?, you want help don't you?, then give us some working code to play with instead of leaving us to guess at what you are trying to achieve.

                    K Offline
                    K Offline
                    Kyeiv
                    wrote on 29 Jun 2020, 08:26 last edited by
                    #10

                    @Markkyboy at the beginning i have attached the code, unfortunately the project i am working on is very big, so i had to cut some parts but the core intent is included within the code that is provided

                    M 1 Reply Last reply 29 Jun 2020, 08:37
                    0
                    • K Kyeiv
                      29 Jun 2020, 08:26

                      @Markkyboy at the beginning i have attached the code, unfortunately the project i am working on is very big, so i had to cut some parts but the core intent is included within the code that is provided

                      M Offline
                      M Offline
                      Markkyboy
                      wrote on 29 Jun 2020, 08:37 last edited by
                      #11

                      @Kyeiv said in How do i make ColumnLayout draw items directly under each other:

                      @Markkyboy at the beginning i have attached the code, unfortunately the project i am working on is very big, so i had to cut some parts but the core intent is included within the code that is provided

                      Yes, your code was the first thing I saw when reading your question, but your code does not represent what you are showing in your last picture.

                      I appreciate your code base is large and it takes much effort to transpose a working chunk, but without working code, we are just left playing guessing games.

                      I tried to build your code first off and it would not build. I had edit the code to remove unwanted characters, code like "Button { . . . }" prevents the build from completing, so we have to clean up your code to make it work, which it doesn't, so I asked you to paste some working code that builds, then maybe we can get to the heart of your problem.

                      Here's what I get when I clean/build your code, this resembles nothing like your last image;

                      column-layout-problem.JPG

                      Don't just sit there standing around, pick up a shovel and sweep up!

                      I live by the sea, not in it.

                      1 Reply Last reply
                      1
                      • K Offline
                        K Offline
                        Kyeiv
                        wrote on 29 Jun 2020, 09:42 last edited by
                        #12

                        I managed to solve the issue changing the code to:

                        ColumnLayout
                        {
                        	id: listcolumn2 
                        	Layout.fillWidth: true
                        	Layout.preferredWidth: 500
                        	Layout.minimumWidth: 100
                        				
                        	spacing: 0
                        
                        	ColumnLayout
                        	{
                        		id: sublistcolumn1
                        		Text{...}
                        
                        		ListView
                        		{
                                               id: lv1
                        			Layout.fillHeight: true
                        			Layout.fillWidth: true
                                               Layout.minimumHeight: lv1.contentItem.childrenRect.height		}
                        
                        		Layout.fillWidth: true
                        		Layout.preferredWidth: 500
                        		Layout.minimumWidth: 100 
                        	}
                        	ColumnLayout
                        	{
                        		id: sublistcolumn2
                        		Text{...}
                        
                        		ListView
                        		{
                                               id: lv2
                        			Layout.fillHeight: true
                        			Layout.fillWidth: true
                                                  Layout.minimumHeight: lv2.contentItem.childrenRect.height	
                        		}
                        
                        		Layout.fillWidth: true
                        		Layout.preferredWidth: 500
                        		Layout.minimumWidth: 100
                        	}
                               Item
                        	{
                        		id: filler
                        		Layout.fillHeight: true
                        		Layout.fillWidth: true
                        		Layout.preferredWidth: 500
                        		Layout.minimumWidth: 100
                        	}
                        }
                        
                        1 Reply Last reply
                        0

                        11/12

                        29 Jun 2020, 08:37

                        • Login

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