UI5 / UI5/webcomponents

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

Open
#10,593 3 comments 0 reactions 1 assignee View on GitHub

@olannyv is already working on this.

Since Jan 27, 2025.

enhancement Medium Prio TOPIC RD
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

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.

Image

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.