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

[harish22]

Thanks for your support — it’s working well and meeting our expectations.

However, we’ve noticed a small empty space at the bottom of the page. We tried adjusting the max-height in the CSS, which helped to some extent, but there’s still a slight gap remaining.

Thanks again,
Harish

[alex.l]

Hi Harish,

What DOM inspector shows? What space is that? Calendar's or owner container? Or reserved place for buttons? How to reproduce this?

[harish22]

Hi Alex,

To help reproduce the issue, please follow the steps below:

i) Comment out the swimlane configuration:

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

ii) Apply the following CSS changes:

.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;
}

iii) Remove addTask from bottomItems:

features: {
    columnHeaderMenu: true,
    columnLock: true,
    columnToolbars: {
        bottomItems: {
            addTask: null
        }
    }
},

iv) Minimize the browser window.
If the empty space at the bottom isn’t visible at full size, minimizing the window should make it appear.

I've attached a DOM inspector screenshot showing the relevant swimlane body class.

Thanks,
Harish

[marcio]

Hey Harish,

The empty space at the bottom might be due to the max-height setting not fully utilizing the available viewport height. You can try adjusting the max-height to 100vh or use height: calc(100vh - someOffset) to ensure it fits the viewport without leaving any gap.

Here's an example:

.b-taskboard-column,
.b-taskboard-column.b-taskboard-column-start,
.b-taskboard-column.b-taskboard-column-end {
    height: calc(100vh - 20px); /* Adjust the offset as needed */
}

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

This should help eliminate the empty space at the bottom.

[harish22]

Hi Marcio,

Thank you for your help.

The style update with height: calc(100vh - 20px); looks good visually.

However, I’ve noticed that when dragging and dropping a task card, it affects some background context or layout unexpectedly.

I’ve attached a reference for your review.

Thanks,
Harish

[marcio]

Hey,

It was a CSS issue, I added an updated version with the fix here https://codepen.io/marciogurka/pen/EaVXzaE.