How do i make ColumnLayout draw items directly under each other

Kyeiv

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

		}
	}
}

J.Hilk

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

GrecKo

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

Kyeiv

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

Kyeiv

i have not came across any solution searching through documentation

J.Hilk

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

Kyeiv

@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.Hilk

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

Kyeiv

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

Markkyboy

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.

Kyeiv

@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

Markkyboy

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

Kyeiv

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