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

У меня есть список с сгруппированными элементами списка объектов. Как здесь, в приложении Explored, нажмите «Образцы». Теперь каждый из этих элементов имеет отступ 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;
}

css sapui5
person inetphantom    schedule 22.01.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

Взгляните на пример JSBin.

person schnoedel    schedule 22.01.2016

arrow_upward
2
arrow_downward

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

.sapMLIB.sapMObjLItem.myownclassforpadding{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: green;
}
person Saddamhussain    schedule 22.01.2016
comment
Зачем? какие мысли? - person inetphantom; 22.01.2016
comment
чтобы сделать его более конкретным. обратитесь к этому документу для подробного понимания: openui5beta.hana.ondemand.com/#docs /руководство/ - person Saddamhussain; 22.01.2016

arrow_upward
1
arrow_downward

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

Например:

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

Это сделает ваши свойства padding и background-color более приоритетными, чем sapUI5.

person Lucas Alves Costa    schedule 19.04.2018
comment
Это не очень хорошее решение. Пожалуйста, не используйте только !important, когда есть стабильные способы сделать это. - person Boghyon Hoffmann; 20.04.2018
comment
@inetphantom Использование !important часто приводит к эффекту снежного кома. Если элемент с !important необходимо переопределить, разработчик вынужден снова использовать !important. Другой причиной является риск конфликта имен. Мы не можем гарантировать, что никто никогда не будет использовать одно и то же имя для своих классов стилей. Этого можно избежать с помощью четко определенной группы селекторов. Однако есть веские причины для использования !important, но они не относятся к разработчикам приложений UI5, поскольку ключевое слово не предназначен для быстрого исправления. - person Boghyon Hoffmann; 23.04.2018