Change font message box

[Former Member]

Hi, I have a message box ui5 and I want to change font style, for example make it bigger. It doesn't matter which styleClass I add it doesn't work.

How can I achieve that ? I've tried adding different classes but these are added to the MessageBox and then overwritten in the divs. SAP displays the message text inside an span tag. The only way it changes the font is by changing style in this span with the debuggin console.

Any ideas? Thanks

MessageBox.confirm(msg, { icon: MessageBox.Icon.INFORMATION,

title: "Confirm",

styleClass: 'sapLText', //bCompact ? "sapUiSizeCompact" : "",

actions: [sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.CANCEL],

<span id="__text245" data-sap-ui="__text245" style="text-align:left">Please confirm the action </span>

[iftah_peretz]

Hi,

I looked a bit into it and after playing around with it I managed to set the font-weight to bolder, like so:

In your CSS file

.myMessageBox {
	font-weight: bolder;
}

In your call to the MessageBox set the styleClass

MessageBox.confirm("Are you bolder than me?", { styleClass: "myMessageBox" });

Changing the size of the font requires, surprisingly, much more effort. The reason is that there a lot of rules in any given SAPUI5 app - and it is no fun trying to fight this jungle of conflictions and the specificity is endless. So, the font-size is getting its rule from another class.

But, it's not over yet!

Adding this to the CSS

*#myBox span {
	font-size: 1.875rem !important;		
}

And making this the call to the MessageBox

MessageBox.confirm("The end?", 
{ id: "myBox",  styleClass: "myMessageBox" });

Will do the job! You can continue and clean it and just move it all to the id,

like so

CSS:

*#myBox span {
	font-size: 1.875rem;	
	font-weight: bolder;
}

Controller:

MessageBox.confirm("Will it ever end?", { id: "myBox"});