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

How do i make ColumnLayout draw items directly under each other



  • Hello I have a problem with ColumnLayout. I have two items which i want to be drawn one right under another. unfortunately ColumLayout divides given space in two and draws first of them at the top, and the second in the half of the height making a huge space between them.

    What am i getting:
    {
    item1

    item2

    }
    What i want:
    {
    item1
    item2

    }

    My full code of the layout:

    Item {
    	id: layout
    
    	ColumnLayout {
    		id: mainColumn
    		anchors.fill: parent
    
    		RowLayout
    		{
    			Button{...}
    
    			Button{...}
    		}
    		RowLayout
    		{
    			id: listViewRow
    			ColumnLayout
    			{
    				id: listcolumn1
    				Text{...}
    
    				ListView
    				{
    					Layout.fillHeight: true
    					Layout.fillWidth: true
    				}
    
    				Layout.fillWidth: true
    				Layout.preferredWidth: 500
    				Layout.minimumWidth: 100
    			}
    			ColumnLayout
    			{
    				id: listcolumn2 //this one is causing problem!!! sublistcolumn1 and sublistcolumn2 should be right under each other
    				Layout.fillWidth: true
    				Layout.preferredWidth: 500
    				Layout.minimumWidth: 100
    				
    				spacing: 0
    
    				ColumnLayout
    				{
    					id: sublistcolumn1
    					Text{...}
    
    					ListView
    					{
    						Layout.fillHeight: true
    						Layout.fillWidth: true
    					}
    
    					Layout.fillWidth: true
    					Layout.preferredWidth: 500
    					Layout.minimumWidth: 100 
    				}
    				ColumnLayout
    				{
    					id: sublistcolumn2
    					Text{...}
    
    					ListView
    					{
    						Layout.fillHeight: true
    						Layout.fillWidth: true
    					}
    
    					Layout.fillWidth: true
    					Layout.preferredWidth: 500
    					Layout.minimumWidth: 100
    				}
    			}
    
    		}
    	}
    }
    

  • Moderators

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


  • Qt Champions 2018

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



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



  • i have not came across any solution searching through documentation


  • Moderators

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



  • @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


  • Moderators

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



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

    exampleColLay.png



  • 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.



  • @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



  • @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



  • 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
    	}
    }