Kanban column rendering

[Daniel Vasiliu]

Hello,

I'm trying to use the Kanban component and I ran into a problem. I have the template below, it's a generic one. I want to have all 5 columns the same width and the Kanban to fill all the availbale horizontal space without overflowing so there's no scrolling needed.

<ejs-kanban width="100%">
  <e-columns>
    <e-column headerText='Column1' keyField='Open'></e-column>
    <e-column headerText='Column2' keyField='InProgress'></e-column>
    <e-column headerText='Column3' keyField='Testing'></e-column>
    <e-column headerText='Column4' keyField='Close'></e-column>
    <e-column headerText='Column5' keyField='Close'></e-column>
  </e-columns>
</ejs-kanban>

When loading the page in any dekstop browser (Chrome/Edge/etc.), the columns are rendered as expected, auto-sized and filling the width of the container.

However, if I use the DevTools to simulate a device (like Galaxy Tab S4 (default settings in Chrome and Edge), the columns are very​ wide, and the scroll bar appears.

If I load the page in the desktop browser default mode (no device simulated) and it loads (as intended), and then​ select the device from DevTools, it also works as expected. With no device simulated, if I just resize the DevTools panel so the viewport width is less than the simulated device's resolution, then reload the page, it renders as expected.

The problem happens in device simulated mode and also in Chrome on an Android tablet and Safari on an iPad.

Is this intended? If so, is there a way to disable this behavior?

Thank you.

[Bhuvaneshwari Thirunavukarasu]

Hi Daniel Vasiliu,

Thanks for reaching out.

We have reviewed your query and tested the Kanban layout by simulating an iPad using Chrome and Edge DevTools. In our testing, the Kanban columns rendered as expected without introducing horizontal scrolling each column automatically adjusted to fill the available space.

To assist further, we’ve attached a working sample and a screen recording for your reference:

Sample Link: Fs1szk8v (duplicated) - StackBlitz

Screen Recording:

To help us reproduce and resolve the issue effectively, could you please modify the provided sample or share a minimal reproducible version that reflects the behavior you're observing on your device?

Once we can replicate the scenario, we’ll be able to suggest an accurate solution.

Looking forward to your response.

Best regards,
Bhuvaneshwari T