search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 260 forks source link

Regression: Tab Container CSS "container-type: inline-size;" is breaking popover usage #7856

Closed ybesnehard closed 9 months ago

ybesnehard commented 10 months ago

Bug Description

Tab Container now use the css property container-type: inline-size that break the fixed position inside its content (usage of popover for example)

Affected Component

Tab Container

Expected Behaviour

The Tab Container should not use container-type: inline-size that breaks the fixed position of components inside it

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-dmwcp7?file=/index.html

Steps to Reproduce

  1. Open the sandbox
  2. Click on the tab 1
  3. Click on hello button
  4. Popup is shown but not at the right position

Log Output, Stack Trace or Screenshots

image

Priority

Very High

UI5 Web Components Version

1.19.0

Browser

Chrome

Operating System

Windows

Additional Context

For SAP Build Process Automation, we can't update to the 1.19.0 that have bug fixes we were expecting due to this regression of popover positioning inside the tab container

Organization

SAP

Declaration

IlianaB commented 10 months ago

Hello @SAP/ui5-webcomponents-topic-rd , This is a reproducible issue with the given codesandbox example. It seems the container-type: inline-size CSS style of TabContainer breaks the fixed position inside its content and as a result Popover is mispositioned. Please, have a look.

Regards, Iliana

TeodorTaushanov commented 9 months ago

Hi @ybesnehard,

The positioning issue is fixed in the main branch.

We recommend placing popup-like components (ui5-dialog and ui5-popover) outside any other components. Preferably, the popup-like components should be placed in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break the position and/or z-index management of the popup-like components.

Best, Teo