[Dialog]: Dialog position/width is determined by viewport not by parent element

[f16r]

Bug Description

The Dialog position/width is determined by the viewport and not by its parent element.
In general this is fine but e.g. when the Web Assistant is shown the dialog is partially covered.

While the application adapts to the Web Assistant sidebar (see red box as an example), the dialog is covered.

Affected Component

Dialog

Expected Behaviour

Dialog positioning/width is based on the parent element. (or at least having the option)

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpOyBjb2xvcjogdmFyKC0tc2FwVGV4dENvbG9yKTtcIj5cbiAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG4gIDxteS1lbGVtZW50IG5hbWU9XCJVSTUgV2ViIENvbXBvbmVudHNcIj48L215LWVsZW1lbnQ-XG4gIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCJtYWluLmpzXCI-PC9zY3JpcHQ-XG48L2JvZHk-XG5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cbiJ9LCJtYWluLnRzeCI6eyJuYW1lIjoibWFpbi50c3giLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFVJNUVsZW1lbnQgZnJvbSBcIkB1aTUvd2ViY29tcG9uZW50cy1iYXNlL2Rpc3QvVUk1RWxlbWVudC5qc1wiO1xuaW1wb3J0IERpYWxvZyBmcm9tIFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvRGlhbG9nLmpzXCI7XG5pbXBvcnQganN4UmVuZGVyZXIgZnJvbSBcIkB1aTUvd2ViY29tcG9uZW50cy1iYXNlL2Rpc3QvcmVuZGVyZXIvSnN4UmVuZGVyZXIuanNcIjtcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSBcIkB1aTUvd2ViY29tcG9uZW50cy1iYXNlL2Rpc3QvZGVjb3JhdG9ycy5qc1wiO1xuXG5AY3VzdG9tRWxlbWVudCh7XG4gIHRhZzogXCJteS1lbGVtZW50XCIsXG4gIHJlbmRlcmVyOiBqc3hSZW5kZXJlcixcbn0pXG5leHBvcnQgY2xhc3MgTXlFbGVtZW50IGV4dGVuZHMgVUk1RWxlbWVudCB7XG4gIEBwcm9wZXJ0eSgpXG4gIG5hbWU_OiBzdHJpbmc7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZ3JpZDsgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyZnIgMWZyOyBoZWlnaHQ6IDMwMHB4XCI-XG4gICAgICAgIDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiByZWRcIj5cbiAgICAgICAgICA8RGlhbG9nIGlkPVwiZGlhbG9nXCIgaGVhZGVyLXRleHQ9XCJSZWdpc3RlciBGb3JtXCIgb3Blbj5cbiAgICAgICAgICAgIDxoMT5UZXN0PC9oMT5cbiAgICAgICAgICAgIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZXRldHVyIHNhZGlwc2NpbmcgZWxpdHIsIHNlZCBkaWFtIG5vbnVteSBlaXJtb2QgdGVtcG9yIGludmlkdW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFnbmEgYWxpcXV5YW0gZXJhdCwgc2VkIGRpYW0gdm9sdXB0dWEuIEF0IHZlcm8gZW9zIGV0IGFjY3VzYW0gZXQganVzdG8gZHVvIGRvbG9yZXMgZXQgZWEgcmVidW0uIFN0ZXQgY2xpdGEga2FzZCBndWJlcmdyZW4sIG5vIHNlYSB0YWtpbWF0YSBzYW5jdHVzIGVzdCBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldC4gTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNldGV0dXIgc2FkaXBzY2luZyBlbGl0ciwgc2VkIGRpYW0gbm9udW15IGVpcm1vZCB0ZW1wb3IgaW52aWR1bnQgdXQgbGFib3JlIGV0IGRvbG9yZSBtYWduYSBhbGlxdXlhbSBlcmF0LCBzZWQgZGlhbSB2b2x1cHR1YS4gQXQgdmVybyBlb3MgZXQgYWNjdXNhbSBldCBqdXN0byBkdW8gZG9sb3JlcyBldCBlYSByZWJ1bS4gU3RldCBjbGl0YSBrYXNkIGd1YmVyZ3Jlbiwgbm8gc2VhIHRha2ltYXRhIHNhbmN0dXMgZXN0IExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD5cbiAgICAgICAgICA8L0RpYWxvZz5cbiAgICAgICAgPC9kaXY-XG4gICAgICAgIDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiBibHVlXCI-PC9kaXY-XG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH1cbn1cblxuTXlFbGVtZW50LmRlZmluZSgpO1xuIn19

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

CBC

Declaration

• I’m not disclosing any internal or sensitive information.

[didip1000]

Hey @f16r,

In your example, the dialogue covers both the red and blue divs. Could you clarify if this was intentional? Are you expecting that the dialogue should cover only the red rectangle, that it should cover both rectangles, or something else?

Best,
Diana

[f16r]

Hey @didip1000,
yes, I'd expect that the dialog stays inside the red div.

Best

[didip1000]

Hey @SAP/ui5-webcomponents-topic-rd,

Can you please take a look at this feature request? The user would like to be able to define where they want the dialog to open.

Best,
DIana