Как да премахнете подложката от елемент от списък с обекти?

Имам списък с групирани елементи от списък с обекти в него. Като тук в приложението Explored щракнете върху Проби. Сега всеки от тези елементи има подложка 1rem, дадена от css със селектора .sapMLIB.sapMObjLItem.

Сега исках да намаля горната и долната подложка до 0.25rem, така че добавих клас към обекта и импортирах персонализиран css (чрез manifest.json), всичко както е описано в инструкциите. Не работи, тъй като нормалният 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;
}

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;
}

Това ще направи вашите свойства за подложка и цвят на фона с предимство пред 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