Inline cards - wrap in columns

[Diogo Arenhart Marinho]

I'm trying to create a kanban with more than 1 card inside the same line, not using 100% width.

Using this kind of view we could show far more cards in the screen, without the need of scrolling, what is necessary when showing it on a TV in the company wall.

The attached image is an example adding the css styles below.

.e-card-wrapper {

  display: flex;

  flex-flow: row wrap;

}

.e-card {

  width: 140px;

  margin-right: 8px;

}

But when moving cards it doesn't work well.

Can you help me?

Attachment: columns_kanban_4c40e08c.zip

[Revanth Krishnan]

Hi Diogo, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When using the style to show cards in the same line and moving the cards doesn’t work properly”. 

 

We tried to reproduce the issue in the following ways, 

• Made sample with the style shared and width as ‘120%’ and made the same layout as the screenshot attached.
• Moved the column from one row to another without any issue.
• Ensured the same in all major browsers.

 

But we couldn’t reproduce the issue from our end. We have prepared a sample for your reference, 

 

Sample: https://stackblitz.com/edit/angular-sgavks-58vity?file=app.component.html 

 

Can you please share us with more following details? 

• The code snippet of the Kanban used in the application.
• The exact package version used in the application.
• The video illustration of the issue reproducing scenarios.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

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 

[Diogo Arenhart Marinho]

I'm using a custom card template.

When changing the same code sample you've sent to use a custom template, the dropped cards doesn't work as expected.

Changed Sample: https://stackblitz.com/edit/angular-sgavks-hjgjxt?file=app.component.ts

[Revanth Krishnan]

Hi Diogo, 

 

 

Good day to you. 

 

 

We have validated your query “When changing the same code sample you've sent to use a custom template, the dropped cards don't work as expected.” 

 

We are able to reproduce the issue in the modified sample and the issue occurred because the ‘headerField’ in ‘cardSettings’ is not given. As ‘headerField’ is mandatory in ‘cardSettings’ property. We have modified the sample for your reference, 

 

Code Snippet: 

 

export class AppComponent { 

  @ViewChild('kanbanObj') kanbanObj: KanbanComponent; 

  public kanbanData: Object[] = extend([], kanbanData, null, true) as Object[]; 

  public cardSettings: CardSettingsModel = { 

    template: 'cardSettingsTemplate', 

    headerField: 'Id' 

  }; 

} 

 

Sample: https://stackblitz.com/edit/angular-sgavks-baum7f?file=app.component.ts 

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth