Как удалить отступы из элемента списка объектов?

У меня есть список с сгруппированными объектами списка объектов в нем. Как здесь, в Исследуемом приложении, нажмите "Образцы". Теперь каждый из этих предметов имеет отступ 1rem, данный css с селектором .sapMLIB.sapMObjLItem,

Теперь я хотел уменьшить верхний и нижний отступы до 0.25rem, поэтому я добавил класс к объекту и импортировал пользовательский CSS (через manifest.json), все как описано в пошаговом руководстве. Это не сработало, так как обычный CSS перезаписывает мой пользовательский.

Другой попыткой было добавить класс sapUiNoContentPadding элементам, а также правилам css, которые перезаписываются правилами, описанными в первом абзаце.

Что я делаю неправильно? как убрать этот отступ, не переписывая рендер?

Мой взгляд:

<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;
}
Источник

3 ответа

Решение

Ваш CSS класс myownclassforpadding не будет использоваться, потому что CSS из библиотеки более специфичен, так как использует два класса sapMLIB а также sapMObjLItem, Вы можете сделать свой CSS более конкретным следующим образом:

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

Посмотрите на пример JSBin.

Источник

Попробуйте селектор ниже, чтобы переопределить CSS по умолчанию.

.sapMLIB.sapMObjLItem.myownclassforpadding{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: green;
}
Источник

Если ты пишешь !important после того, как свойства, которые вы хотите изменить, будут перезаписаны sapUI5 свойства класса.

Например:

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

Это сделает ваши свойства отступов и фона более приоритетными, чем sapUI5,

Источник
Другие вопросы по тегам