Closed nexfibe closed 6 years ago
The question is forwarded to my colleagues with #1870231300 Updates will be posted here as well
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.
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 :
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
May be the below screen shot helps in showing difference at CSS level for form behavior btween two version
version 1.52 version 1.54
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 ?
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.
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.
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
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 : `
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
for the above screen shot by inspecting html element has css display:none