Modification of Design Studio Message Popup

[Karol-K]

Purpose

You want to change sizes of the message popup for better display of longer messages.

Technical Background

Message popup can be modified by use of CSS. You have to overwrite few classes and change the correpsonding sizes.

"Default" Size

This is how the default message popup is looking like in notification and with content (27 messages). Message Popup is displaying maximum of 15 messages.

The corresponding CSS

This example is mainly to adjust the sizes, but you can experiment with different properties.

.sapzenmessageview-PopupContainer {

  width: 800px !important;

  height: 520px !important;

}

.sapzenmessageview-PopupContainerHeader {

  width: 800px !important;

}

.sapzenmessageview-RowRepeaterRow {

  width: 800px !important;

}

.sapzenmessageview-RowRepeaterRow>.sapUiBorderLayoutBottom>.sapUiTv {

  width: 800px !important;

}

.sapzenmessageview-HeaderText {

  /* set to popup size - 60px*/

  width: 740px !important;

}

Message Popup After the Change

How To Use the Example?

In Attachment you can find the application and CSS file. The examples above were created in local mode.

You have to create a folder in local repository "MESSAGE" and copy there the attached files. The txt extension needs to be removed.