CODEWITHSUNDEEP
sapui5
Nandan Chaturvedi
Nandan Chaturvedi

Reputation: 1098

How to modify content padding in sap.f.DynamicPage

I would like to know if anyone faces this issue of awkward padding between the table and header of sap.f.DynamicPage:

Awkward padding in Dynamic Paage

Upvotes: 2

Views: 4458

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

There is nothing "incorrect" about the padding between the header and the content. It's the intended design which can be seen in the source code:

.sapFDynamicPageContent/*, ...*/ {
  //...
  padding: 2rem 3rem 0 3rem;
}

Don't

This shouldn't be changed if you're following Fiori design guidelines or if the app is supposed to be running on FLP. Please, avoid using custom CSS to remove the padding as mentioned in the documentation:

SAP Fiori launchpad apps should not override styles.

enter image description here

Do (as of v1.56)

What we can and should, however, is to align the table with the header content by removing the side padding shown below:

enter image description here

This can be achieved by adding the predefined CSS class sapFDynamicPageAlignContent to the table with the width: auto. E.g. in XMLView:

<Table class="sapFDynamicPageAlignContent" width="auto">

The SAP Fiori Design guidelines require that the DynamicPageHeader's content and the DynamicPage's content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the content area of DynamicPage, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapFDynamicPageAlignContent CSS class to them and set their width property to auto. [src]

Here is an example: https://openui5nightly.hana.ondemand.com/#/sample/sap.f.sample.DynamicPageFreeStyle/preview

Predefined Padding CSS Classes (as of v1.58)

Apart from the above mentioned guidelines, sap.f.DynamicPage now supports the following padding classes:

  • sapUiNoContentPadding
  • sapUiContentPadding
  • sapUiResponsiveContentPadding

E.g.: Applying this completely removes the surrounding padding:

<f:DynamicPage class="sapUiNoContentPadding">

Upvotes: 1

P&#233;ter Cata&#241;o
P&#233;ter Cata&#241;o

Reputation: 467

I think it's by design:

actually it's the padding of the content.
With custom CSS you can decrease padding:

.sapFDynamicPageContent {
    padding-top: 0;
}

Upvotes: 0

Related Questions