ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

fix(ui5-flexible-column-layout): prevent layout issue

Open kineticjs opened this issue 7 months ago • 0 comments

Fixes: https://github.com/SAP/ui5-webcomponents/issues/11694

To reproduce the issue on the internal test page:

  1. On fiori/test/pages/FCL.html, disable the animation (e.g. using the newly added switch)
  2. Resize the column on any FCL instance on the page that is given a two-columns layout (only begin and mid columns visible) Expected: The columns are resized but the FCL remains in two-column layout Actual: an empty end column becomes visible (and its width is the same as the min-width assigned from the CSS)

Problem description:

  1. The CSS class ui5-fcl-column--hidden used to be added only from the FlexibleColumnLayout.ts (i.e. after rendering the component) and never from the template itself (i.e. never during rendering).
  2. This was required to ensure that the ui5-fcl-column--hidden class is added only after the collapse animation has ended (to prevent premature collapse)
  3. However, since the ui5-fcl-column--hidden class is never added from the template itself, it is lost on each re-rendering => the issue https://github.com/SAP/ui5-webcomponents/issues/11694 showed a use-case where the component is rerendered (thus the ui5-fcl-column--hidden class is lost) but the logic to add it back (from FlexibleColumnLayout.ts) is skipped because no changes to the layout of the given column were made neither on app-side nor by user-interaction

Solution: Fixed by ensuring that the ui5-fcl-column--hidden class is added from the template itself is all cases except when collapse animation in progress (to satisfy the case described in point 2 above)

kineticjs avatar Jun 27 '25 08:06 kineticjs