动态页面中的填充不正确

Question

我想知道是否有人在sap.f.DynamicPage的表格和标题之间遇到这种尴尬填充的问题：

Answer 1

我认为这是设计的：

• Dynamic Page | SAP Fiori Design Guidelines
• SAPUI5 SDK - Samples（1.50.10）

实际上它是内容的填充。
使用自定义CSS，您可以减少填充：

.sapFDynamicPageContent {
    padding-top: 0;
}

Answer 2

没有什么＆＃34;不正确＆＃34;关于标题和内容之间的填充。这是可以看到的预期设计in the source code：

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

唐＆＃39;吨

如果您遵循Fiori设计指南或者该应用应该在FLP上运行，则不应更改此内容。请避免使用自定义CSS删除填充为mentioned in the documentation：

  

SAP Fiori启动板应用应不覆盖样式。

Do（截至v1.56）

然而，我们可以而且应该通过删除下面显示的边填充来使表与标题内容对齐：

这可以通过将预定义的CSS类sapFDynamicPageAlignContent添加到具有width: auto的表来实现。例如。在XMLView中：

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

  

SAP Fiori Design指南要求DynamicPageHeader的内容和DynamicPage的内容垂直对齐。在DynamicPage的内容区域中使用sap.ui.layout.form.Form，sap.m.Panel，sap.m.Table和sap.m.List时，您需要调整其左侧文本偏移量以实现垂直对齐。为此，请将sapFDynamicPageAlignContent CSS类应用于它们，并将其width属性设置为auto。 [src]

以下是一个示例：https://openui5nightly.hana.ondemand.com/#/sample/sap.f.sample.DynamicPageFreeStyle/preview

预定义的填充CSS类（从v1.58开始）

除上述指南外，sap.f.DynamicPage现在支持以下padding classes：

• sapUiNoContentPadding
• sapUiContentPadding
• sapUiResponsiveContentPadding

例如：应用此选项可完全消除周围的填充：

<f:DynamicPage class="sapUiNoContentPadding">