Kanban - Loading into another Div Issues

Webix JS
1

Hi -

I really like the kanban component, and am trying to find good use for it in my application.

I can get kanban to load fine but when I try to load inside a div it inherits css from other parts of my application (I am using MVC Bootstrap 3 and kendo widgets) - when I load into a div which is inside a tab, the kanban is not visible - tracing the issue I have found that the height and widths of the columns are all messed up.
As an example the result just loading without a container gives me this style for the main div
width: 2560px; height: 831px; white-space: nowrap;
and this for the accordian items
border-width: 1px; width: 626px; height: 809px; margin-top: 10px; margin-left: 10px; vertical-align: top; display: inline-block;

but when I load with a container in my div I get this in the style of the main div
border-width: 1px; width: 60px; height: 108px; white-space: nowrap;
and this for the accordian items
border-width: 1px; width: 0px; height: 86px; margin-top: 10px; margin-left: 10px; vertical-align: top; display: inline-block;

I can Jquery these styles into to html and the kanban will show but resizing does not work.

Any ideas ?

2

Edit:
I have found a work around - just create the following function
function moveBoard() {
$(“div[view_id=‘myBoard’]”).appendTo(’#myBoardHere’);
}
using your own div names and board id of course

then at the end of the webix.ready() function call moveBoard()

works fine .

3

When component initialized in the container, it will try to set sizes the same as a size of the container. So if you have a div which has width:60px, the kanban will have the same 60px width.

So you need to set the correct styles for the container or use height and width settings in the kanban’s configuration.