Question

我有一个包含分组对象列表项的列表。 Like here in the Explored App，点击“示例”。现在，每个项目都有1rem的填充，由css和选择器.sapMLIB.sapMObjLItem给出。

现在我想将顶部和底部填充减少到0.25rem，所以我添加了一个类的对象并导入了一个自定义的CSS（通过manifest.json），所有这些都是in the Walkthrough所描述的。它不起作用，因为普通的CSS会覆盖我的自定义css。

另一种尝试是将类sapUiNoContentPadding添加到元素中，但后面的css规则也会被第一段中描述的规则覆盖。

我做错了什么？如何在不重写渲染器的情况下删除该填充？

MyView的：

<mvc:View
  controllerName="sap.ui.xxxx.someapp.controller.MyList"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <StandardListItem title="Titel"/>
  <List class="sapUiResponsiveMargin sapUiNoContentPadding"
    width="auto"
    items="{path : '//elementsSet',
      sorter : {
        path : 'attribute1}',
        group : true
      }
    }">  
    <items>
      <ObjectListItem title="{= ${attribute1} === '' ? 'Enter Text Please' : ${attribute1}}"
        icon="{= ${attribute1} === '' ? 'sap-icon://alert' : 'sap-icon://sys-enter'}"
        number="{attribute4}"
        numberUnit="$"
        numberState="{=  ${attribute4} > 10 ? 'Error' : 'Success' }"
        type="Active" press="onItemPress"
        markFlagged="true" markFavorite="true"
        showMarkers="true" 
        class="sapUiNoContentPadding myownclassforpadding">
        <firstStatus>
          <ObjectStatus
            text="some text" />
        </firstStatus>
        <attributes>
        <ObjectAttribute text="{attribute1}" visible="false"/>
        <ObjectAttribute text="{attribute2}"/>
        <ObjectAttribute text="{attribute3}" visible="false"/>
        <ObjectAttribute text="{attribute4}" visible="false"/>
        </attributes>
      </ObjectListItem>
    </items>
  </List>
</mvc:View>

我的css

.myownclassforpadding{
    padding: 0;
    background-color: green;
}

Answer 1

尝试使用以下选择器覆盖默认的css。

.sapMLIB.sapMObjLItem.myownclassforpadding{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: green;
}

Answer 2

您的CSS类myownclassforpadding将不会被使用，因为库中的CSS更具体，因为它使用了两个类sapMLIB和sapMObjLItem。您可以通过以下方式使CSS更具体：

.sapMLIB.sapMObjLItem.myownclassforpadding{
   padding: 0;
   background-color: green;
}

查看JSBin example。

Answer 3

如果您在要更改的属性后面写!important，它将覆盖sapUI5类属性。

例如：

.myownclassforpadding{
    padding: 0 !important;
    background-color: green !important;
}

这将使您的填充和背景颜色属性优先于sapUI5。

如何从对象列表项中删除填充？

3 个答案: