Horizontal scrolling with long columns is very annoying

When you have a long column with many cards, you always have to scroll aaaaaaaall the way to the bottom of your window to scroll anything horizontally. There were several issues opened about this:


Couldn’t the page background be “grabbable” and movable like in e.g. Trello? Posting this here because one of the issues said to discuss such ideas in the forum.

1 Like

+1 to this!

My guess is that the only way to solve this is would be to put the whole thing into a fixed height container that scrolls (or, while we’re at it, have one vertical scrollbar per column instead of one vertical scrollbar for all columns; it would be much nicer) and therefore prevent the page from scrolling vertically, but I don’t know how to do that (I’m just a user).

Compact view doesn’t eliminate the need?

Not for us, unfortunately. Some of the projects have 17 columns and compact mode makes them illegible and thin. I know, this is not how this should be used, but sometimes it is.

A 21:9 monitor might solve the width problem :wink: But it won’t solve the scroll-down problem before you can scroll sideways.

Those two things in the board’s menu? Well,

  • Regarding the “Collapse tasks” (vertical compaction) mode, it can be used for different purposes sometimes, and/or it might be too information-sparse (or may be hacked up to be kept ultra simple for specific situations).
  • Regarding the “(disable) Horizontal scrolling” mode, that thing can’t work in cases where you have lots and lots of columns (or at some point your column widths become minuscule, and the column headers look all broken).

Furthermore, in some cases, even outside the backlog column, you may have too many tasks per column for even the “Collapsed” view. to work without vertical scrolling being triggered…

As a general approach, one-vertical-scroll per column is the typical solution I’ve seen implemented in other apps. It also has the advantage of kind of automatically handling your infinite “backlog/wishlist” column (well, other than bypassing swimlanes, which your plugin enables as far as I understand). Scrolling columns seems like a decent enough approach at first glance, at least I don’t immediately see drawbacks.

Hi,

Using a mouse that posses a vertical+horizontal scrolling system can be a temporary solution.
No problem on mac for exemple with the Mighty mouse or the Magic mouse. Both gives the ability to scroll to any direction.

:slightly_smiling_face:

Yeah, we give our laptop users the suggestion, but it’s not that convincing because they used Trello in the past and it has the “click and drag anywhere” feature. It probably seems natural to people to do it that way.

What would be required to make the background grabbable? I could give this a try, but I haven’t done frontend stuff since 1999 or so, no idea how today’s fancy stuff works.

+1

Board with 10 columns and 5 swimlanes makes horizontal scrolling hard, because you have to scroll down first :confused:

https://codepen.io/toddwebdev/pen/yExKoj
might help

Workaround: use Material Theme of Plugin “Customizer”

Yes, that works, thank you. Although the Material theme has some other issues, e.g. text contrast too weak and fonts too small. We’d have to think where the time is better invested: in a general click-and-hold-to-drag feature or into customizing the Material theme :neutral_face:

Thanks for the link, I managed to cobble something together in a plugin that works, but it only works on initially loading a page. When e.g. dragging a card, the scrolling events still trigger and you don’t really want that. If I can figure out how to prevent this, I will push out a plugin for others to criticize. I am terrible at JavaScript :frowning_face:

I put out a plugin here: https://github.com/psy-q/kanboard-plugin-grabscroll

I attached the event listener higher up and now it seems to work.

1 Like

Works like a charm, good stuff.

1 Like

In version 1.2.13, there is a partial/tangential fix for some of the problems, with https://github.com/kanboard/kanboard/commit/061b4a676c ; while it’s not a fix to put the whole page/viewport in a scrolling area to have an always-visible horizontal scrollbar, at least it solves a portion of the symptoms (and fixes some other problems), so mentioning it here.

However, there seems to be a bug where the calculated height is too big, so even with a single swimlane there is always the global scrollbar showing up when the contents overflow, instead of only having the per-column scrollbars. Strangely, I’ve seen no way to fix this just by changing the “90vh” property with the web browser inspector. If someone could figure out a fix for that… it would be fantastic :slight_smile:

In case anyone wants to give it a try, I have filed a bug report about the height issue: https://github.com/kanboard/kanboard/issues/4487

If you want the scroll bars to be at the top. But key note that there will be no scroll bars at the bottom:

Add this CSS

#board-container, #board-container #board
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg);
    -webkit-transform:rotateX(180deg);
}

There is no way to have 2 scroll bars without changing the HTML and code. In which case you need to add another block above with 1px height and then onscoll event to match them both. (Pure Javascript to add would be worse for performance)

An easier idea but will change your use case would be if we added tab stops to the headers and you can just tab through the columns might make it easier and unintrusive to current UI

1 Like
1 Like