Vertical display boards

[ferminvz]

Hi there! Sorry I'm very new in this, I just need to display the boards vertically not horizontally. Is there any way to change that? Thanks a lot!

[xscode-auto-reply]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.
For urgent issues and priority support, visit https://xscode.com/riktar/jkanban

[marcosrocha85]

I think you mean you need columns to be horizontal, isn't it? If was that, jKanban cannot display that way you need. All jKanban can do can be found at documentation and demo.

[WriterStat]

Ran across this, I know it's a while since asked...but thought I'd leave a help for others.

I think they actually did mean 'display the boards vertically' ...you are maybe selling the lib short saying it cannot.

To display the boards vertically, is pretty easy:

• Just set a max height for the boards.
• Set the container to allow the boards to wrap.
• Set the container width to force wrap if needed or allow naturally.

Pretty easy.

They now display vertically on wrap, instead of continuing on horizontally.

To make the boards the same height while displaying vertically:

• Set the container css
• display: flex;
• flex-wrap: wrap;

Flex will make all boards the same height in a row if using max-height when the boards expand with items, allowing the vertical display to be orderly.

Hope helps someone and the library.

[WriterStat]

Note: it was discovered, if you display vertically, that the lib appears on first blush, to require two boards across from each other horizontally(only visually in a row) or jkanban turns off the ability to drag any items in any of the boards and turns off the ability to drag any of the boards or their items.

Not sure why yet. Testing... Dragula seems to allow vertical display drag natively, but am testing

With that known as a caveat, if you have two boards (displaying across) you can display the boards vertically.

Like so...
{} {}
{} {}
{} {}

But there is definitely a bug. As drag selection/dragging shouldn't be dependent. Hope helps, in finding a bug that could cause headaches later and in mobile.

[WriterStat]

Will check to see if this is a bug in our lib or the jkanban lib or the dragula lib.

[marcosrocha85]

Thank you for your feedback. We hopely want you achieve your needs.

[WriterStat]

We'll play around with the undocumented option ...responsive in jkanban, its default is set at 700px. Basically the lib doesn't implement drag/drop if the browser window width is initially set at 700px or less. Sort of a hidden gotcha. =) If a user resizes their window., drag/drop could stop working, unexpectedly.

Jkanban Demo drag stops working if browser is resized below 701px window and the window is refreshed for it to take effect.

Any reason why we couldn't set this at like 300px? Or even remove it? Why might this option width limiter be useful? Thanks ahead for any insight, by the creator. Thanks!

Note: the class... is-moving also gets set here on any element that starts to drag and if not specifically dropped it doesn't get removed. Which could create unexpected multiples of is-moving elements if elements are spilled. Hope helps in some way. We'll take this offline. But interested in the answers for the above. Thanks again!