Add a ScrollBar inside the Board

[brunonetadmin]

Add support to a native or at least, to custom Scrollbars (like SlimScroll), right now, the component that holds the items don´t support this, at least not without losing the drag-and-drop functionality.

Thanks.

[marcosrocha85]

Hello @brunonetadmin , I achieved scrollbar by doing some CSS modifications to built DOM of jKanban. Just after initialize I set my main div to full height.

.full-height {
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}
.board-full-height {
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: hidden;
}
.drag-full-height {
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

And then I sought for class kanban-container adding also full height to it:

jkanban = new jKanban({
    //... just initialization stuff
});

var x = document.getElementsByClassName("kanban-container");
var i;
for (i = 0; i < x.length; i++) {
    var _attribute = x[i].getAttribute("class");
    x[i].setAttribute("class", _attribute + " full-height");
} 

Of course each board has to be set to full-heigt as well:

var x = document.getElementsByClassName("kanban-board");
var i;
for (i = 0; i < x.length; i++) {
    var _attribute = x[i].getAttribute("class");
    x[i].setAttribute("class", _attribute + " board-full-height");
} 

And finally set kanban-drag to overflow-auto:

var x = document.getElementsByClassName("kanban-drag");
var i;
for (i = 0; i < x.length; i++) {
    var _attribute = x[i].getAttribute("class");
    x[i].setAttribute("class", _attribute + " drag-full-height");
} 

Then I have a result like this:

[fernandomirassol]

@marcosrocha85 estou implementando o Jkanban em um projeto e coloquei esta sua solução para a rolagem das Boards, funcionarão porém aqui na minha versão quando esta se arrastando o cartão a rolagem não acompanha, tem alguma solução para o caso?

[marcosrocha85]

Sorry buddy, you must write in english to help community. It's a dragula related issue. You can check something there bevacqua/dragula#121.

[fernandomirassol]

Thanks @marcosrocha85 ! For the information, I will check and try to find a solution!