How to control size on a wordpress site

Users
1

Hi,

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.

Anybody point to a reference guide for this?

Thanks,

Tony

2

I have the same Problem…

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

window.addEventListener(‘resize’, somFunction(), false);

Need also help please
Thanks
Severin

3

If only Neville Lugton could read this and let us know where we can send our beer as thanks for when he sorts this out :frowning:

4

Thanks very much for the important input for a beginner

5

@ Tony
look at These: https://de-ch.wordpress.org/plugins/bpmnio/
There is a working plugin but only for the viewer and whitout max height canvas

6

Hi @Spanish_tony & @Severin,

Apologies for the slow reply.

The Shortcode accepts the usual sizing attributes (which is something that I should probably have mentioned in the documentation :blush:) .
The defaults are 100% width and a quirky 130px height caused by the SVG format.

[bpmn url="…/diagram.bpmn" height=“500px” width=“500px”]

Hope that helps your issues.

~ Neville

1 Like
7

Thanks Neville for your interesting answer…

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

8

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.