Black rectangles around lines in demo

Hello, People!

I’m trying to include the modeler demo (bpmn-js-examples/starter at master · bpmn-io/bpmn-js-examples · GitHub) in my application, but after rendering, when I move over the lines, I see black rectangles on them:
BlackRectangles

Has anyone experienced such a thing?

Hi @Omcsesz

Its css issue, add diagram.css file then this issue will resolved

Thanks @pummy_sinha, but in the repo GitHub - bpmn-io/bpmn-js-examples: Some examples how to use bpmn-js there are not any css files.

There are CSS files: bpmn-js-examples/viewer.html at master · bpmn-io/bpmn-js-examples · GitHub

Oh, to put the content of in a css. Thanks.

I created a css file with the style content in the example html file, but it still contains the same rectangles.

You don’t have to create your own CSS file to use the bpmn-js styles. Simply include the existing one as shown in the example.

If that doesn’t work, please share your setup or a CodeSandbox so we can inspect your issue.

Actually, it does not work. I’m using a Java framework called ZKoss (https://www.zkoss.org/) to build the UI for my application, and I’m including bpmn.io as a script in it.

I don’t know about ZKoss, bu isn’t it possible to include any library styles into a ZKoss application? If not, maybe it makes sense to build your bpmn-io integration, which also includes the needed CSS.

Yes, actually it is possible. I don’t expect everyone to know Zkoss, I thought that adding the css will do the trick.