SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.96k stars 1.24k forks source link

sap.ui.layout.form.SimpleForm #2021

Closed nexfibe closed 6 years ago

nexfibe commented 6 years ago

OpenUI5 version: 1.54.3

Browser/version (+device/version): Chrome/Version 66.0.3359.139 ( windows 7 )

Any other tested browsers/devices(OK/FAIL): IE 11(windows 7) -- FAIL URL (minimal example if possible): https://jsfiddle.net/abula206/wngu1pnv/

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

Steps to reproduce the problem: 1.Use latest OpenUI5 version and use control simple form and in form content aggregation add below code : `

<Select ></Select>`
  1. Use OpenUI5 version 1.52 version and use control simple form and in form content aggregation add below code : `

3.In the fiddle example increase result panel to see the space taken by hidden element.

What is the expected result? In the latest SAPUI5 version the input control when set to visible false in simple form expected not to take space on the UI but it takes space What happens instead? In the SAPUI5 version 1.52, the input control when set to visible false in simple form is not taking any space but in the SAPUI5 version 1.54.3 the control visible="false " is taking space .

Any other information? (attach screenshot if possible)

The below screen shot for version : 1.54.3 image

for the above screen shot by inspecting html element has css display:none

stephania87 commented 6 years ago

The question is forwarded to my colleagues with #1870231300 Updates will be posted here as well

stephania87 commented 6 years ago

An update: This is the correct behavior, as fields are placed in Grid's cells. Whether content is visible or not should not affect the grid structure, mess the layout or screen readers.

nexfibe commented 6 years ago

The behavior was different for simple form control for all the openui5 version before 1.54. if you check any openui5 version below 1.54 you will see that control in not taking any space . The image below was working fine till openui5 version 1.52 but after using 1.54 it is mess . It means all the behavior before 1.54 was not correct . I see one strange behavior that when the control property has visible :false the CSS has "display:none" and it is taking space .

screen shot -- when need to enter value in the form scenario one :

image

screen shot : when need to hide the input control but need to show the select control in the same form scenario two :

On selecting new record from the record field I need to hide the input control and show all drop down in the same column of the grid image

May be the below screen shot helps in showing difference at CSS level for form behavior btween two version

version 1.52 image version 1.54 image

If I remove min-height from this CSS it works fine as version 1.52 how to patch the code which already have such 20 forms in the development ?

stephania87 commented 6 years ago

The change is intentional, as without it the grid layout is incorrect. The Form has a grid in itself, where labels and corresponding display/edit controls are placed based on calculations about size, cells, spans. Each control is in a cell of the grid, where the grid should not reflect the visibility of content and should not move content. In this case, a Form combines two forms - two types of controls for editing content. Instead there should be a form per editing type, or you can change the edit control before displaying the form.

ilhan007 commented 6 years ago

As my colleague @stephania87 already mentioned, since 1.54 the behaviour is different, the invisible controls still occupies space and the change is intentional.

How to patch the code which already have such 20 forms in the development? You can overwrite the styling as follows:

div[class="sapUiRespGrid"]>div[class="sapUiRespGridSpan"] { min-height: 0; }

In order the above style to take effect, make sure is loaded after the library.css.

szein-fsd commented 3 years ago

In case someone still searching for this issue: i'm using SimpleForm and when i set editable="true" the placeholder for the Text will be removed when its property visible=false SAPUI5 version: 1.6.25