[ANGULAR] Guidance Needed on Using Locked Column with Individual Scrollbars

[harish22]

Hi Team,

I’m currently using the locked column feature in Bryntum Taskboard. After enabling it, I noticed that the vertical scrollbar for each resource column disappears, and instead, a single vertical scrollbar appears for the entire page.

Previously, without the locked column enabled, each resource column had its own vertical scrollbar, which is the preferred behavior for our use case.

I’d like to retain the locked column functionality while also restoring individual vertical scrollbars for each column. Could you please guide me on how to achieve this?

Thanks in advance for your support.

Best regards,
Harish

[marcio]

Hey Harish,

Thanks for reaching out.

To achieve individual scrollbars for each column while using locked columns, you might need to customize the TaskBoard's layout or use CSS to manage overflow for each column.

You can try setting the overflow-y property to auto for each column's container using CSS. This should allow each column to have its own scrollbar:

.bryntum-taskboard .b-column {
    overflow-y: auto;
}

Ensure that the height of the columns is set appropriately to allow scrolling. If this approach doesn't work as expected, you might need to delve deeper into customizing the TaskBoard's rendering logic.

If you need further assistance, please provide a test case for us to check. Are you able to reproduce that on our demo? https://bryntum.com/products/taskboard/examples/locked-column/

[harish22]

Hi Marcio,

Thanks for your quick response.

Yes, I was able to reproduce this in the locked column example.

Below are the steps I followed:

When I commented out the swimlaneField and swimlanes configuration lines, I able to get it.

    // swimlanes : [
   // { id : 'devs', text : 'Developers', collapsible : false },
  //  { id : 'sales', text : 'Sales', collapsible : false }
 // ],

// swimlaneField : 'team',

Thanks in advance for your help!

[marcio]

Hey harish22,

Thanks for clarifying. I tried with the section commented, but it still looks like it's working the same way.

Could you please check the recording and see if I'm trying to reproduce correctly? If you could also provide a recording of the expected behavior, it would be nice to understand your issue.

[harish22]

Hi Marcio,

Thanks for checking.

If you notice in the locked column example, there’s no vertical scrollbar for each resource column (you can try dragging a few tasks into a column to see it). In other Taskboard examples, each resource column has its own vertical scrollbar when the number of tasks exceeds the visible area.

I’ve attached a screen recording showing the expected behavior — I’m looking for a vertical scrollbar within each column based on the number of tasks in it.

Let me know if you need any more details.

Best regards,
Harish

[marcio]

Hey Harish,

Thanks for clarifying. I was able to see the difference.

That's indeed caused by the CSS updates that the locked columns add. To have the other behavior with the locked columns enabled, you need to have a fixed height for the b-taskboard-column class, like this:

.b-taskboard-column {
	height: 500px;
}

You can test that on the locked columns demo and see the scrolling as you described.

[harish22]

Hi Marcio,

Thanks for the quick fix — I’ve tested it, and it looks good overall!

However, I noticed a small issue. When I try to scroll only the locked column, the entire page scrolls instead. For example, let’s say the locked column (e.g., Quarter 4) is positioned at the start and contains 10 tasks — in this case, I expect a vertical scrollbar within the locked column itself. But currently, the whole page is scrolling instead.

Ideally, each column — including the locked one — should have its own vertical scrollbar when tasks overflow, and scrolling within one column shouldn’t affect others.

Let me know if any clarification is needed.

Best regards,
Harish

[tasnim]

Hey,

Please try with this CSS

.b-taskboard-column, .b-taskboard-column.b-taskboard-column-start, .b-taskboard-column.b-taskboard-column-end  {
	max-height: 80%;
}

.b-taskboard-body {
	overflow-y: hidden !important;
}

chrome_r1QuZDIlVN.gif (1.39 MiB) Viewed 12736 times

Does that help?

[harish22]

0904-4b42-4058-9cc3-944e92732f97.mp4

(6.5 MiB) Downloaded 423 times

Hi Tasnim,

I tried implementing the CSS changes you mentioned, but unfortunately, it’s not working as expected.

In some cases, the scrollbar doesn’t scroll to the end, and at times, the scrollbar is missing entirely — even when there are multiple tasks in the column.

I’ve attached a screen recording for your reference. Please have a look and let me know if you need any further details.

Thanks,
Harish

[tasnim]

I see. Please try using this instead. Looks like this fixes the issue

.b-taskboard-column, .b-taskboard-column.b-taskboard-column-start, .b-taskboard-column.b-taskboard-column-end  {
	max-height: 85vh;
}

.b-taskboard-body {
	overflow-y: hidden !important;
}

chrome_VCQSZQTzEM.gif (3.73 MiB) Viewed 12715 times