1. Home
  2. Forum
  3. Blazor
  4. Help with resize kanban, column headers not shown correctly

Help with resize kanban, column headers not shown correctly

Hi, I need your help with kanban in blazor wasm, version 19.1.0.56

When the page is loaded the first time, everithing works fine, but when I rezise the browser the titles of the columns to the right are not visible


Please help!



Attachment: DUDA_KANBAN_5840b5fe.rar

7 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team April 16, 2021 09:23 AM UTC

Hi Jose, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “Kanban column header is not shown correctly when resizing the browser”. 
 
We have analyzed the shared screenshot and tried to reproduce the issue in the following ways, 
  • Ensured the issue with the Kanban header as a template.
  • Ensured the issue with dynamic header rendering.
  • Also ensured the issue with and without the ‘StackedHeaders’.
  • Ensured the issue in all the browsers.
 
But we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 
 
But we suspect that the issue occurred because the element above the Kanban is overlayed. Can you please ensure the issue with only Kanban rendered on the page in your application? 
 
Can you please share us with more following details, 
  • The code snippet of the Kanban rendered in the application.
  • The exact package version of the component used in the Application.
  • If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps.
 
The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 
 
Regards, 
Revanth 


JL jose luis barajas April 17, 2021 11:47 PM UTC

Hi Revanth

I discover the cause of the error, but I dont know how to fix it

I have this style because I need fixed widht in every column,
because default kanban behavior its to resize column widths and I dont like this!

Please help!


<style type="text/css">
    .e-kanban .card-template-wrap td {
        background: none !important;
    }
    /*ANCHO DE LA COLUMNA*/
    .e-kanban .e-kanban-table col {
        width: 300px !important;
    }

    .e-kanban .e-card-wrapper {
        height: 500px !important;
    }

</style>

RK Revanth Krishnan Syncfusion Team April 19, 2021 10:50 AM UTC

Hi Jose, 
 
 
Good day to you. 
 
 
We have further validated your query with the shared styles and tried to reproduce the issue with the fixed column width, but we couldn’t reproduce the issue from our end. We have prepared a sample along with the styles shared for your reference, 
 
 
Can you please share us with more following details, 
  • The whole code snippet of the Kanban rendered in the application.
  • The exact package version of the component used in the Application.
  • If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps.
  
The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.  
  
Regards,  
Revanth 


JL jose luis barajas April 24, 2021 02:59 AM UTC

Hi

When I move to the right with the horizontal scroll, the titles of the kanban get stuck, that is, they do not move to the position of the new columns.
For more information, I am using a Blazorise template throughout the application, I do not know if this could be the source of the problem

Its possible put allways on top kanban header?
If I have large data content, when I scroll down, the user could always see column title.!


RK Revanth Krishnan Syncfusion Team April 26, 2021 08:48 AM UTC

Hi Jose, 
 
 
Good day to you. 
 
 
We have validated your queries, 
 
Query 1: “When I move to the right with the horizontal scroll, the titles of the Kanban get stuck, that is, they do not move to the position of the new columns”. 
 
We tried to reproduce the issue by adding the CSS styles shared before to set the width of each column and ensured the reported issue by scrolling to the right, but we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 
 
 
Can you please share us with a simple issue reproducible sample or please modify the shared sample, so that we can validate and reproduce the issue from our end and assist you at the earliest. 
 
Query 2: “It’s possible to put always on top Kanban header? If I have large data content, when I scroll down, the user could always see column title” 
 
The Kanban header can be set to the top always by setting the CSS style properties to the ‘e-kanban-header’ class. We have prepared a sample for your reference, 
 
Code Snippet:       
<style> 
    .e-kanban-header { 
        position: sticky; 
        top: 0; 
        z-index: 1; 
    } 
</style> 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


Marked as answer
JL jose luis barajas April 26, 2021 04:54 PM UTC

Hi Revanth 

Option Query2, works great for me!

Thanks in advance!!!

RK Revanth Krishnan Syncfusion Team April 27, 2021 08:42 AM UTC

Hi Jose, 
 
Thanks for the update. 
 
We are glad that the reported issue has been resolved. Please let us know if you need further assistance. 
 
Regards, 
Revanth 


Loader.
Up arrow icon