Skip to Content
avatar image
Former Member

Change font message box

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>

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Dec 15, 2017 at 11:13 PM

    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"});
    Add comment
    10|10000 characters needed characters exceeded