I’ve installed the bpmn.io plugin onto a wordpress. The idea is to use it as a viewer for displaying BPMN files.
It works really quite easily, I just click on the BPMN button and paste the link, however the only problem is that I don’t know how to control the size of the image on the page. At the moment the image shown is way too small to read the text.
When the div height from the canvas container is smaler then about 550px the svg is big.
When the div height from the canvas container is biggerr then about 550px the svg is only 130px height.
css height : 100% ! important on all divs
i think there is somthing with the EventListener by resizing
The Shortcode accepts the usual sizing attributes (which is something that I should probably have mentioned in the documentation ) .
The defaults are 100% width and a quirky 130px height caused by the SVG format.
Your solution works well as long as no charts are imported. In this case, it only works if the user wants to expand the diagram.
The problem of the integration in WordPress is that the canvas element is no longer the same as the body element and therefore:
html, body, #canvas {
height: 100%;
padding: 0;
}
No longer applies. Once the canvas element is in the context of a html page, the height: 100% does not work properly. Since the tool should work on desktop and mobile and I do not want to force the height with JavaScript I have no more ideas how I can force the element to the height in a float: left context in WordPress.
I also do not want to pretend a fixed height, because of course this simply works.
Best greetings from Zurich
Severin
I solved the Problem on WordPress site.
It was a Problem with the WordPress viewport.
Add CSS:
.djs-container{
height:80vh;
min-height:80vh;
}
and it works fine.