Boards Same Height about jkanban HOT 7 CLOSED

This can be done if wanted using display: flex; in css and setting flex-wrap, overflow-x and height using calc with vh and px. ...may not be an enhancement as each creator may choose different settings. In case it helps. Without needing/having to set your kanban to full height of div. Hope helps. Best, -C

from jkanban.

Hi! I could, but it's as easy as:

• Setting the board container to display: flex; ~ This basically forces all the boards to have the same height. If you add to one the others will grow as well.

• Then set flex-wrap: nowrap; - This forces all the boards to be in the same row, and next to each other.

• Set overflow-x for the lists/boards container - This gives you a horizontal scrollbar, for when there are more boards than screen width.

• And then set the items container height or max-height - using calc with 100vh and minus px. - What height you'd like the items container is up to you. Subtract the height of the heading area or top menu area if you have one + the footer area height and then any extra that you want to, depending on how big you'd like the board or list area to be. Adjust visually.

Each app or project may decide differently. But this way, no matter the screen size they will fit and adjust correctly to it. The items area in each list will only take up the space you decide for it. And you'll be able to drag and drop between lists regardless of the amount of items in each, because each list area will scroll.

If you set the height, then you can also then set a max-height for a maximum height size if you choose.

If you play around and try the above, you'll get it quite quick I think.

from jkanban.

Following the tips above, I did this and it worked:

.kanban-drag{
max-height: 350px;
overflow: hidden;
overflow-y: scroll;
}

from jkanban.

Technically you have to set your entire kanban to full height of div and set each board as well. Something like this.

I think it would be nice if jKanban brings that built-in.

from jkanban.

This can be done if wanted using display: flex; in css and setting flex-wrap, overflow-x and height using calc with vh and px. ...may not be an enhancement as each creator may choose different settings. In case it helps. Without needing/having to set your kanban to full height of div. Hope helps. Best, -C

Can you write an example? I don't think mine is clean and practical enough.

from jkanban.

Excellent! Once you set up flex correct. The height of the item container (kanban-drag) will determine the height of the overall flex container and the height of all the other Boards. I then wrote some js code to handle drag/scroll of an item (up/down) and placement inside the item containers when dragging items between boards and inside the kanban-drag container.

And then I wrote js code for drag/scroll of boards both horizontally and vertically. For both regular browsers and for browsers on mobile devices. So you can drag past the visual end when there are more boards than can be viewed on a screen. Once I did that, things started to get usable.

from jkanban.

Closed

from jkanban.