Set minimum column width in Kanban and enable horizontal scrolling

[Kelwin Buratto]

Hi everyone,

I'm using the Kanban component (React), and I’ve noticed that it resizes responsively based on screen size. However, on smaller screens, the columns become too narrow, making it difficult to read the cards.

I’d like to know if there’s a way to:

1. Set a minimum width for each column (e.g., 300px);

2. Enable horizontal scrolling when the board overflows the screen, instead of squeezing the columns.

I tried applying min-width via CSS to .e-kanban-column, but it seems the component’s internal layout prevents horizontal scrolling from working properly.

Is there any recommended approach to handle this?

Thanks in advance for any help! 🙌

[Vinitha Jeyakumar]

Hi Kelwin Buratto,

Your requirement to set a minimum width to the Kanban columns and to enable the horizontal scrolling can be achieved by using the dataBound event and by customizing the CSS styles like below,

Code snippet:

 function dataBound() {

    for (

      var i = 0;

      i < document.getElementsByTagName('colgroup')[0].childNodes.length;

      i++

    ) {

      document

        .getElementsByTagName('colgroup')[0]

        .childNodes[i].classList.add('ColHeader');

    }

  }

<style>

        .e-kanban

        .e-kanban-content

        .e-content-row:not(.e-swimlane-row)

        .e-content-cells

        .e-card-wrapper,

      .e-kanban

        .e-kanban-content

        .e-content-row:not(.e-swimlane-row)

        .e-content-cells

        .e-card-container {

                   min-width: 250px;

         }

       .e-kanban .e-kanban-table {

               table-layout: unset !important;

       }

        .ColHeader {

                min-width: 250px;

         }

</style>

Sample: https://stackblitz.com/edit/react-embnhtyq?file=index.html%3AL27,index.js

API Link: https://ej2.syncfusion.com/react/documentation/api/kanban#databound

Regards,

Vinitha