Fixed Column Width

Fixed column widths keep Kanban cards readable when a board contains many workflow stages. Each column uses the specified width, and a horizontal scrollbar appears when the columns exceed the available space.

By default, columnWidthSpec is "Auto": the columns share the available board width. Use "Fixed" when preserving the space for each card is more useful than showing every stage at once.

JavaScript

Set columnWidthSpec to "Fixed" and specify columnWidth in pixels. The default fixed width is 200 pixels. This example uses 220 pixels for each of the six workflow columns:

<div id="dp"></div>

<script>
  const dp = new DayPilot.Kanban("dp", {
    columnWidthSpec: "Fixed",
    columnWidth: 220,
    columns: [
      {id: "backlog", name: "Backlog"},
      {id: "ready", name: "Ready"},
      {id: "progress", name: "In Progress"},
      {id: "review", name: "Review"},
      {id: "testing", name: "Testing"},
      {id: "done", name: "Done"}
    ],
    cards: [
      {id: 1, name: "Search", text: "Add search filters", column: "ready"},
      {id: 2, name: "Export", text: "Export the current report", column: "progress"}
    ]
  });
  dp.init();
</script>

Changing the width

To change the column width after initialization, pass the new value to update():

dp.update({columnWidth: 260});

To let the columns share the available board width again, switch back to automatic sizing:

dp.update({columnWidthSpec: "Auto"});

columnWidth controls the workflow columns. If your board uses swim lanes, their labels have separate width settings: swimlaneHeaderWidth for a single header, or the individual column widths in rowHeaderColumns for multiple headers.

Demo

• Kanban: Fixed Column Width

See also

• Column Loading
• Row Header Columns