Sizing of columns when having many columns that go beyond the page

[David Brenchley]

I have over a dozen columns in my Kanban.  Columns are templated. When I put width 100%, it shows all of the columns very very narrow (unusably narrow).  When I put a bigger specific size like 5000px width, they show fine, but when I look at the page from my phone, each of the columns has a HUGE width and I can't scroll to the end right.  When I set to Auto I don't see anything.

Would like to see this fixed or added functionality to deal with it.  Ideally would like to set the width and height to 100% and it would display correctly for many columns.  It is not ideal to put in specifc width or height as often you don't know those because of the different screen sizes.  Also, would be nice if we could set the size of the columns with a parameter, similar to Xamarin.

[Balasubramanian Sattanathan]

Hi David, 

Greetings from Syncfusion Support. 

We have checked and tried to reproduce your reported problem at our end. But unfortunately, we were unable to reproduce it. Since the Kanban columns are rendered properly when we provide width as 100% and as well as auto and we could scroll to the right end. We have prepared a sample based on this for your reference which can be available from the below link.  

https://www.syncfusion.com/downloads/support/forum/163440/ze/KanbanSample-809676184.zip 

If the issue is not resolved at your end, kindly share the below details to validate the problem and provide a solution at the earliest. 

• Did you made any changes for Kanban parent element or ‘.e-kanban’ class?
• Share Kanban related code snippet with package version
• Share an issue reproduced sample(if possible) or
• Try to reproduce your problem in the shared sample and let us know the replication steps.

 

Regards, 

Balasubramanian S 

[David Brenchley]

I took your sample and ran it as is and it is doing all the things I was telling you about.  Attached screenshot.

Attachment: Screenshot_20210312_200204_d81f2798.zip

[Ravikumar Venkatesan]

Hi David, 

Thanks for the update. 

We have validated your reported problem at our end and setting up the width as 100% and auto is making the Kanban column smaller in the Desktop mode but in the mobile mode it works properly as expected. So, we suggest you to use the below styles to increase the width of the columns in the Desktop mode, and for the same, we have prepared a sample which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163440/ze/blazor-kanban-customizing-columns-width-sample-1025280186 

[Index.razor] 

<style type="text/css"> 

    .e-content-cells, .e-header-cells { 

        width: 200px !important; 

    } 

</style> 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan