Horizontal misalignment with SimpleForm and Table

[Ghilga]

OpenUI5 version: 1.106.0

Browser/version (+device/version): Chrome/105.0.5195.127 (Official Build) (64-bit)

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

URL (minimal example if possible):

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

Steps to reproduce the problem: The class sap.ui.layout.form.SimpleForm ColumnLayout does not align horizontally with sap.m.Table when inside a sap.uxap.ObjectPageSubSection, even when using CSS classes (sapUiTinyMarginBegin for example). I haven't tested it without using ObjectPageSubSection.

What is the expected result? Horizontal alignment with SimpleForm and Table

What happens instead? SimpleForm begin margin is smaller than the Table begin margin

Any other information? (attach screenshot if possible) As you can see below, the About section is misaligned with the Benefits section. About is a SimpleForm and Benefits is a Table

[boghyon]

Have you tried setting class="sapUxAPObjectPageSubSectionAlignContent" and width="true" to the SimpleForm and Table?

<form:SimpleForm xmlns:form="sap.ui.layout.form" class="sapUxAPObjectPageSubSectionAlignContent" width="auto"><!--...-->

<Table xmlns="sap.m" class="sapUxAPObjectPageSubSectionAlignContent" width="auto"><!--...-->

From the sap.uxap.ObjectPageSubSection API reference section blocks:

Note: The SAP Fiori Design guidelines require that the ObjectPageHeader's content and the ObjectPage's subsection content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the subsection content area of ObjectPage, if the content is not already aligned, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapUxAPObjectPageSubSectionAlignContent CSS class to them and set their width property to auto (if not set by default).

Don't use the sapUxAPObjectPageSubSectionAlignContent CSS class in the following cases:

• In combination with ResponsiveLayout, because ResponsiveLayout applies custom paddings. To align items with sapUxAPObjectPageSubSectionAlignContent, use ColumnLayout.
• If there are multiple controls in the same ObjectPageSubSection, because the CSS class interferes with their alignment.

[Ghilga]

This didn't change anything unfortunately :/

[boghyon]

Could you share a minimal example or steps to reproduce? From the screenshot, it looks like a sap.m.Panel is in use in each sub section. Is that correct?

You could clone https://jsbin.com/wanojif/edit?html,js,output, edit the view definition accordingly, save the new JSBin, and share the URL here.

[Ghilga]

Could you share a minimal example or steps to reproduce? From the screenshot, it looks like a sap.m.Panel is in use in each sub section. Is that correct?

No, it is just either a SimpleForm or a Table.

You could clone https://jsbin.com/wanojif/edit?html,js,output, edit the view definition accordingly, save the new JSBin, and share the URL here.

Thanks! Here you go: https://jsbin.com/cobokogudi/edit?html,js,output

[50gY]

Hello @Ghilga, Thank you for sharing this finding. I've created an internal incident 2270143200. The status of the issue will be updated here in GitHub.

[Ghilga]

Thank you so much for the help!

[Ghilga]

In which version will this fix be added?

[IlianaB]

Hello @Ghilga ,

The fix will be available with SAPUI5 1.109 version.

Regards, Iliana

[Ghilga]

Thank you so much for the assistance!

Regards, Leonardo