Skip to Content
0

SAPUI5 change font size with custom css

Nov 16, 2017 at 05:19 PM

272

avatar image

Hi experts,

I would like to increase the font-size of the title text of an ObjectListItem by custom CSS:

View:

<ObjectListItem xmlns="sap.m" id="MAIN_LIST_ITEM" type="{device>/listItemType}" press="_handleItemPress" class="sapMTextBold"
title="{parts: [{path: 'TaskTitle'}, {path: 'CustomAttributeData'}], formatter: 'cross.fnd.fiori.inbox.Conversions.formatterTaskTitle'}"
intro="{parts: [{path: 'TaskSupports/Release'}, {path: 'SupportsRelease'}], formatter: 'cross.fnd.fiori.inbox.Conversions.formatterStatusForReserved'}"
number="{path: 'CustomAttributeData', formatter:'cross.fnd.fiori.inbox.Conversions.formatterCustomNumberValue'}" numberUnit="{path: 'CustomAttributeData', formatter:'cross.fnd.fiori.inbox.Conversions.formatterCustomNumberUnitValue'}">

CSS:

.sapMTextBold {
    font-size: 10px;
}

but it doesn't work.

10 |10000 characters needed characters left characters exceeded

try adding this to your class:

font-size:10px !important;
0

doesn't work :-(

0

open your ui in developer mode (F12) nav to your item... see if there is any other class being applied.. you may need to do some css navigation

.sapMObjectIdentifierTitle > #YOUR ID {

font-size: 10px !important;

}; /or something like that as your class definition

0
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Jamie Cawley
Nov 16, 2017 at 09:06 PM
0

The ObjectListItem generates list items with divs and spans within it. The css should be something like

.sapMTextBold div > span {
    font-size: 10px !important;
} 

Regards,

Jamie

Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hi Jamie,

Thanks a lot for your answer, it solved the problem!!!

KR,

Vincent

0

Hi Jamie,

Is it also possible to change only the font size of the title of ObjectListItem?

KR,

Vincent

0

Try using

.sapMTextBold div:nth-of-type(2) span

Regards,

Jamie

0