-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popup Menu positioning breaks inside "containing blocks" #2156
Comments
@deje1011 I moved this over to bpmn-js. Will have a look and see if I can reproduce your issue. |
Could you elaborate why you need a |
Thanks for reporting this! I'd be happy to review a contribution providing a fix for this. It could probably use the |
Sure! In our case, the diagram is shown inside a dialog. And the dialog has an opening animation, which uses There are some other css properties that can cause the same issue if they were to be used on the And I'm afraid we can't use the I couldn't find an implementation of a function to detect the closest containing block, yet. If I find the time later today, I can implement it and post it here. |
Pragmatic solution: Remove |
Yes, removing Btw, we discovered today that the form-js editor has a similar same issue, if it's embedded in such a containing block. I tried to implement a function that finds the containing block for a given element but I must say that I'm not super confident that this works in all cases. And the MDN docs make some distinctions between An easier solution might be to append the popover menu to the body. That way, it can't accidentally be nested inside a containing block and the |
@deje1011 I think you do yourself a favor to get rid of
The other option indeed is for us to move such |
I'll close this as |
Thanks for your work on this library!
We are currently trying to integrate it but we are facing an issue when embedding a bpmn diagram in a dialog.
I'm not sure if the issue should be solved in bpmn-js or in diagram-js but I think it's a general problem with the positioning of popovers:
Describe the Bug
If a diagram is nested within a "containing block" that is not full screen, the positioning of the popup menu breaks.
Imagine the following DOM structure:
Screenshot
As long as there is no containing block around the diagram, this works as expected. But if we turn the
canvas
element into a containing block by adding atransform
, the fixed position of the popup-menu will be relative to the position of that container, instead of the entire document.Therefore, the popover menu will be offset to the right and to the bottom by
100px
(which is the offset of the.canvas
element, caused by the padding on the.content
).Screenshot
Steps to Reproduce
Steps to reproduce the behavior:
100px
of padding to the.content
elementtransform: scale(1)
to the.canvas
elementExpected Behavior
The position of the popover should not be affected by this.
Possible Solutions
I think this could be solved by either appending the popover menu to the body or by subtracting the offset of the closest containing block before applying the position to the popover-menu element.
What do you think?
Environment
Please complete the following information:
The text was updated successfully, but these errors were encountered: