Boards Same Height - Githubissues

skylolo65 commented 5 years ago

New Feature: It would be good to have a parameter so that all boards have the same height (all grow and shrink together).

Use case: My board is so full that after scrolling down I still want to be able to drag and drop from one board to another.

marcosrocha85 commented 5 years ago

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.

WriterStat commented 3 years ago

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

marcosrocha85 commented 3 years ago

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.

WriterStat commented 3 years ago

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.

SULINKOFICIAL commented 1 year ago

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

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

WriterStat commented 1 year ago

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.

riktar commented 1 year ago

Closed

riktar / jkanban

Boards Same Height #55