[Feature]: Add vertical scrolling waterfall layout

[wwjCMP]

Goal or desired outcome of this feature

I use kanban as my card box, but right now it can only scroll horizontally.

Describe the feature

It would be more practical if it had a vertical waterfall layout for scrolling.

Can you think of any alternatives or work-arounds?

No response

Screenshots, mockups, or videos

No response

[pinkflumph]

It's been a while, but I was interested in the same feature and it can be achieved with a little CSS workaround:

/* Allow cards to wrap to multiple lines */
.kanban-plugin__board>div {
    flex-wrap: wrap;
}

/* Enable vertical scrolling */
.kanban-plugin__scroll-container.kanban-plugin__horizontal {
	overflow-y: auto;
}

In addition, you can use some of the cards as headers/line separators to split the lists into groups:

/* Lists with a #kanban_header tag in their cards can be used as line separators */
.kanban-plugin__board .kanban-plugin__lane-wrapper :not(.kanban-plugin__lane-setting-wrapper) + .kanban-plugin__scroll-container:has(a[href="#kanban_header"].tag){
    display: none;
}

.kanban-plugin__board .kanban-plugin__lane-wrapper:has(.kanban-plugin__scroll-container a[href="#kanban_header"].tag) .kanban-plugin__item-button-wrapper{
    display: none;
}

/* Spacing */
.kanban-plugin__board .kanban-plugin__lane-wrapper {
	margin-top: 5px;
	margin-bottom: 5px;
}

.kanban-plugin__board .kanban-plugin__lane-wrapper:has(.kanban-plugin__scroll-container a[href="#kanban_header"].tag) {
	width: auto;
	margin-top: 10px;
	margin-right: 100%;
	margin-bottom: 10px;
}

A header list is defined by having a card with a #kanban_header tag in it. The cards and "add cards" button will then be hidden from that list and the list will take the entire line, thus acting as a separator. The cards become visible when you press "edit list", thus allowing one to remove the tag if needed.

Overall this code results in something like this:

[mytmou]

I also would like to see a way to move "columns" below each other, not just horizontally, so you can scroll down to see them. Especially useful for situations where you have a smaller number of tasks/cards under a larger number of headings. Example: A list of contacts related to specific projects with each "column" being a project and each card being a contact. Right now you can only see 5 columns at a time, but this way you would be able to see a lot more without scrolling.

[jeetsukumaran]

Thanks @pinkflumph for the CSS! It works well enough until something like this is implemented: #103 !

I was hoping to allow the kanban flow to be controlled by page properties, e.g.

cssclasses:
   - "kanban-vertical"

with .obsidian/snippets/kanban-vertical.css:

.kanban-vertical .kanban-plugin__board>div {
    flex-direction: column;
    /* flex-wrap: wrap; */
}

.kanban-vertical .kanban-plugin__scroll-container.kanban-plugin__horizontal {
	overflow-y: auto;
}

.kanban-vertical.kanban-plugin__board .kanban-plugin__lane-wrapper {
	margin-top: 5px;
	margin-bottom: 5px;
}

.kanban-vertical .kanban-plugin__board .kanban-plugin__lane-wrapper:has(.kanban-plugin__scroll-container a[href="#kanban_header"].tag) {
	width: auto;
	margin-top: 10px;
	margin-right: 100%;
	margin-bottom: 10px;
}

and .obsidian/snippets/kanban-wrap.css:

.kanban-wrap .kanban-plugin__board>div {
    flex-wrap: wrap;
}

.kanban-wrap .kanban-plugin__scroll-container.kanban-plugin__horizontal {
	overflow-y: auto;
}

.kanban-wrap .kanban-plugin__board .kanban-plugin__lane-wrapper {
	margin-top: 5px;
	margin-bottom: 5px;
}

.kanban-wrap .kanban-plugin__board .kanban-plugin__lane-wrapper:has(.kanban-plugin__scroll-container a[href="#kanban_header"].tag) {
	width: auto;
	margin-top: 10px;
	margin-right: 100%;
	margin-bottom: 10px;
}

But unfortunately, this does not work. I'm guessing because the Kanban div's are not actually descendents of the root div with the css class ".kanban-vertical"?