Resize height of Kanban in Blazor Wasm

[jose luis barajas]

Hello Is it possible to adjust the Height of the kanban, as change/resize browser dimensions? Only the width is adjusted, but the Height is fixed.

My code is as follows

<div class="row"> <div class="col-sm-12"> <SfKanban TValue="KanbanModel" KeyField="Status" DataSource="tickets" Locale="es" Width="100%" Height="85vh"> <KanbanColumns>

...

Thanks in advance!

[Revanth Krishnan]

Hi Jose, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Is it possible to adjust the Height of the Kanban, as the resize the browser dimension?” 

 

The Height property can be set as ‘100%’, but the 100% will take the parent element’s height of the Kanban which will be auto. So the Kanban height will be set auto. The 100% only works if any of the parent elements have a fixed height. Otherwise, a fixed height of ‘85vh’ can be given to the Kanban to make it adjustable to the browser window. We have prepared a sample with both the scenarios for your reference, 

 

Code Snippet: 

 

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks" Width="100%" Height="85vh"> 

. . . 

</SfKanban> 

Or 

<div class="kanbanContainer"> 

    <SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks" Width="100%" Height="100%"> 

    </SfKanban> 

</div> 

 

<style> 

    .kanbanContainer { 

        height: 500px; 

        overflow: auto; 

    } 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164065/ze/Kanban_Blazor_App1371659425 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth