openui5 icon indicating copy to clipboard operation
openui5 copied to clipboard

sap.f.FlexibleColumnLayout changes height to 100% on resize event

Open yurakovay opened this issue 1 year ago • 1 comments

OpenUI5 version: 1.124.0

Browser/version (+device/version): Google Chrome Version 126.0.6478.63

Any other tested browsers/devices(OK/FAIL): Microsoft Edge

URL (minimal example if possible): https://stackblitz.com/edit/vitejs-vite-xtyjcf?file=Component.js

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

  1. Create a Page with content that has such elements VBox, Hbox (that contains element) and Flexible Column Layout
  2. Flexible Column Layout should have layout="TwoColumnsMidExpanded"
  3. Try to resize the column

A problem occurs when you resize the columns in the FCL, if the FCL is not full screen and there are other elements on the page. For example, the FCL occupies 70% of the page in height, then if you change the width of the FCL column, the height becomes 100% and other objects become invisible.

What is the expected result? The height of the FCL does not change when you resize the column

What happens instead? The height of the FCL changes, thus other elements are not displayed

Any other information? (attach screenshot if possible)

image image

yurakovay avatar Jun 19 '24 13:06 yurakovay

Thanks a lot @yurakovay for reporting this issue. I have created an internal incident DINC0193778 and the respective team will update the status of the issue here in GitHub.

flovogt avatar Jun 26 '24 13:06 flovogt

FlexibleColumnLayout is rather a screen layout organizer, instead of a splitter for content in a page https://experience.sap.com/fiori-design-web/flexible-column-layout/#usage Consider the options for splitting page's content in Fiori Guidelines to reorganize the UI.

Otherwise, the FCL will get a height of 100% of the viewport. With disabled scrolling in the page, you will not be able to see other content that is added around the FCL if the focus brings into view the FCL (resize or tab an element in the FCL columns). You can validate this with a simplified example https://jsbin.com/mezegegura/edit?html,output

stephania87 avatar Jul 10 '24 14:07 stephania87