Problem with overlay - not visible - opacity problem!

Users
1

HI everyone.

I got big problem with overlay - it is not visible in my application. I did an investigation and it seems like some components have wrong opacity value. Here is screen that shows:

  • red is an canvas marker - style is done by this css code:

    .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: red !important;
    }

  • blue with number is an overview that somehow is behind all components?! (I added top styling so you can actually see it. The goal is to add it inside ot the red task element)

PROBLEM 1

Now I checked the css and HTML and I saw that the main rectangle that you see in the screen has opacity set to 0.95 ?? Question is why ? I did not do any styling for it at all…so what is wrong ? Here is screen:

PROBLEM 2

Now, when I removed this opacity in firebug I copuld move my overlayer up, but still not in the task area , but just below it…

PROBLEM 3

What is wrong?? I have no idea. I am using the simplest code possible… I have it in jsf popup, but that should not be a problem…

Here is code

function showDiagram(diagramXML) {

    viewer.importXML(diagramXML, function() {

        var overlays = viewer.get('overlays');
        var canvas = viewer.get('canvas');

        var elementRegistry = viewer.get('elementRegistry');

        var shape = elementRegistry.get('UserTask_1');

        var $overlayHtml = $('<div class="badge">');
        canvas.addMarker('UserTask_1', 'highlight');
        overlays.add('UserTask_1', {
            position: {
                top: shape.height + 150, // rto actually see it
                left: 0
            },
            html: $overlayHtml
        });


    });
}

Please help me…

2

I solved it by:

#myPopupWIndow .djs-overlay-container{
    z-index: 1000;
}

#myPopupWIndow svg {
    z-index: 1;
}

Have bo idea why I had to do it anyway, how come library was not working in my env…

3

Consider closing the div. Maybe that causes confusion.

4

Hi

Thanks for the reply. I used example code from bpmn.io example git repo:

…bpmn-js-examples/blob/master/colors/index.js

There div is not closed. Closing div do not fix it.

5

Did you checkout our overlays example? It is much closer to what you’d like to achieve (regarding the badges).

6

Yes I checked it as well. It is very similar to colors example, and still do not work in my env. Well maybe it is a problem of JSF/ADF environment that I am working in, I do not know. I am glad that I found ot a workaround to this problem. Thanks for your suggestions