Modeler: Container doesn't scale to diagram height

Developers
1

I am creating and rendering a modeler with the following code:

var BpmnModeler = window.BpmnJS;
var modeler = new BpmnModeler({ container: "#pipeline_graph" });
modeler.importXML(pipeline.pipeline.content, function(err) {
  if (!err) {
    console.log("success!");
  } else {
    console.error(err);
  }
});

The resulting diagram looks like the following:

https://infinit.io/_/TNVhNtZ.png

This happens even if I execute this code after successful rendering:

modeler.get("canvas").zoom("fit-viewport");

Any help?

2

Which browser shows the behavior? How do you embed bpmn-js into the site?

3

Hi nikku.

I installed bpmn-js via Bower and concatenated dist/bpmn-modeler.js to my JavaScript in my asset pipeline (Rails / Sprockets).

I also included the dist/assets/diagram-js.css and dist/assets/bpmn-font/css/bpmn-embedded.css stylesheets.

Thoughts?

P.S.: Same problem both in Chrome 43 and IE 11 (on Windows; the editor isn’t really usable on the latter)

4

Make sure you give the diagram container a concrete height:

<div id="pipeline_graph" style="height: 500px"></div>
5

Oh. Does that mean I have to specify a fixed height? That works, of course, but I thought there would be a possibility for the editor to take up exactly the room it needs (but not more than the screen height)…

6

You do not have to specify a fixed height but a height in general or the default height (see your screenshot) is applied. Relative heights work, too:

<div id="pipeline_graph" style="height: 80%"></div>

That is how modern browsers work. The modeler can only occupy space that is given to it by the browser. You as the user have to make sure the container element has an appropriate height. The modeler will fill it up.

7

Cool. Thanks for the explanation.

A suggestion: Could the default height (currently150px!?) set to a value that allows the toolbar to be completely in view?