Our flexible Kanban board for managing tasks with drag drop


Post by jintech »

Hi,
We are using the css:

.b-taskboard-column-body {
    overflow: auto;
}

which hides the scroll bars on the column body.
This can be done in this online example as well: https://bryntum.com/products/taskboard/examples/simple-task-edit/

However, the scroll doesn't work.
So we added our own scrolling function:

// Mouse scroll event to view records in the same column if all of them are not visible 
$(document).on('mousewheel', '.b-taskboard-column-body', function (e) {

// Determine the direction of the scroll and the amount to scroll.
var delta = e.originalEvent.deltaY || -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollAmount = 100; // Amount to scroll in either direction

// Scroll the column content.
this.scrollTop += delta > 0 ? scrollAmount : -scrollAmount;

// Prevent the default scroll behavior.
e.preventDefault();
});

This works fine, we can scroll on each column.
The issue is that for touch pad, the scrolling is very fast but for mouse wheel, it is normal.
How can we fix this? Any idea or suggestions?
Since for both touchpad and mouse wheel, same event is triggered.


Post by Animal »

Columns scroll naturally when they get full:

Screenshot 2024-06-07 at 15.17.58.png
Screenshot 2024-06-07 at 15.17.58.png (115.83 KiB) Viewed 139 times

What extra requirement do you have?


Post by jintech »

Our extra requirement is to hide the scrollbar, which after doing using the CSS we are getting scroll speed issues between the mouse pad and laptop scrollpad.
Please check below:

If you apply this css given below in this example: https://bryntum.com/products/taskboard/examples/simple-task-edit/

.b-taskboard-column-body {
    overflow: hidden;
}

The scroll bar gets hidden and we can not scroll vertically.
So I provided the code for scrolling above but that raises the scroll speed issues between mouse pad and laptop scrollpad.

// Mouse scroll event to view records in the same column if all of them are not visible 
$(document).on('mousewheel', '.b-taskboard-column-body', function (e) {

// Determine the direction of the scroll and the amount to scroll.
var delta = e.originalEvent.deltaY || -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollAmount = 100; // Amount to scroll in either direction

// Scroll the column content.
this.scrollTop += delta > 0 ? scrollAmount : -scrollAmount;

// Prevent the default scroll behavior.
e.preventDefault();
});

Please let us know how to approach with this.


Post by tasnim »

Hi,

To hide the scroll bar you can simply use this css

.b-taskboard-column-body::-webkit-scrollbar {
  display: none;
}
msedge_cbmDZTklbU.gif
msedge_cbmDZTklbU.gif (1.52 MiB) Viewed 51 times

Hope it helps.

Best regards,
Tasnim


Post by Animal »

To hide scrollbars on overflowing columns in a cross-browser way (Works on Safari and Firefox), after the TaskBoard has been rendered, do this:

const columnBodies = Array.from(document.querySelectorAll('.b-taskboard-column-body'));
columnBodies.forEach(c => c.classList.add('b-widget-scroller', 'b-hide-scroll'));

This will hide the scrollbar, but it will still be scrollable using a mouse wheel.

This does not seems like a good idea hiding scrollbars on platforms where users expect to see scrollbars.


Post by jintech »

Thanks for the reply, it works as expected


Post Reply