How to disable scroll and set kanban to responsive

Kanban
#1

Hi.
I’m starting to use Kanban and would like to make the component size adaptive, responsive, as I’m going to use it on mobile devices (tablets) and scrolling, especially horizontally, doesn’t look good. How can I configure my 4 columns to appear simultaneously?

#3

Hi, Andreas

Can you attach a screenshot of your Kanban and specify the resolution of your mobile device?

I opened https://snippet.dhtmlx.com/5hcx01h4?mode=mobile on my phone and it seems very difficult to fit 4 columns on one screen. They would be very narrow and the data would be hard to read.

#4

Hi

Thanks for your reply, I use a tablet Ipad Air and a Samsung 8" in portrait mode.

#5

Hello,

You can assign your own style for the columns of the Kanban, which will force them to fill the screen. Something like this one

    #root .wx-header {
        width: 100%;
    }
    #root .wx-column {
        /* min width */
        --wx-kanban-column-width: 100px;
        /* auto size */
        flex-grow: 1;
    }

https://snippet.dhtmlx.com/xeh6kl8u

#6

Hello,

Please, have a look at the new sample with adaptive version of Kanban: DHTMLX - Kanban. Column fit the screen width (css) .