kanban auto height

Webix JS
#1

For our kanban board, we have swimlanes that span multiple columns, like the sample here:

https://docs.webix.com/samples/63_kanban/04_layouts/04_swimlanes_users.html

In that sample, the board’s height is matched to the height of the window, and each swimlane’s column gets one-third of the height. Our users want the swimlane’s height to fit the content of the cards in the swimlane, so if there are no cards in that swimlane, the swimlane will be short. For swimlanes with lots of cards, the board should grow to show all the cards. No in-column scrolling is desired, just page body scrolling as a whole.

I can sorta brute-force a rendering into the desired effect (close to it, anyway) with the jQuery command:

$(“div.webix_view”).css(“height”, “auto”);

// Add min size so empty columns still have a drop target
$(“div.webix_view”).css(“min-height”, “20px”);

Is there a way to get kanban to behave this way? I noticed some widgets have autoheight, but I couldn’t see how to get it to work with kanban.

#2

Hello @pettys ,

Is there a way to get kanban to behave this way? I noticed some widgets have autoheight, but I couldn’t see how to get it to work with kanban.

By default autoheight cannot be set to the list. List sizing works so that:

  • either the height is fixed/adjusts to the environment, and the height of the cards corresponds to the content in them (height: "auto" for cards, the current setting for lists in the kanban)
  • either the height of the cards is fixed, and the height of the list adapts to them (autoheight for the list)

Therefore, autoheight can be enabled only by setting a fixed height for all the cards in the list. It can be done through the type applied to cards.
Its specific settings for kanban (templates for each default element in the cards) are described here.

In this example, the type of one list has been edited, the scrollview is placed directly in the kanban:
https://snippet.webix.com/zhvdct50

#3

Thanks for the quick response, @annazankevich. If I’m understanding you correctly, the webix kanban control is incapable of supporting swimlanes whose height adjusts based on its content with variable-height cards. Thus it is impossible to replicate the functionality of a board like the one in this image, which pictures variable swimlane heights and variable card heights:

Am I understanding this limitation of the webix kanban widget correctly? I hope I’m missing something - this seems like an odd limitation of a kanban swimlane feature.
Jason

(image source: Expedite work with swimlanes - Azure Boards | Microsoft Docs)

#4

Recording my findings here as I work on this:

  • The example you provided doesn’t use swimlanes, and I haven’t been successful yet adapting it to have swimlane height adjust to content.
  • I’m able to get really close to what I want simply with the CSS rule .webix_view[style] { height: auto !important; }