Skip to Content

Modification of Design Studio Message Popup


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.

You must be Logged on to comment or reply to a post.
    • Hello Juan,

      yes, this should be possible by:

      * switching off the messages in application properties (Application -> Property: Displayed Message Types -> Value: None)


      * taking the classes as listed above and use CSS by adding attribute:

      visibility: hidden;

      Regards, Karol

  • Hi,

    I would like to change sizes of the popup filter panel that appears when I click on "Filter Members" from a Crossbar Context Menù.

    Do you know what class I have to modify?


    Giulia Sogaro

      • Thank you for your answer. I try to explain myself better with some images.

        This is the table context menù:

        context menu1.PNGIt works fine, but when I click on "Filter Members" I see this:

        context menu2.PNG

        The popup is too long and I can not see it all. I would like to modify its height or position.

        Do you know how to do it?

        Best regards,

        Giulia Sogaro

  • Hi Karol,

    I was wondering if it is possible to modify the position of prompt dialogue box using some css coding.

    Let me explain the situation. I get the prompt dialogue box when clicked on the filter icon (filter icon is situated at top of the page in left). But this prompt box is always appearing in the middle of the screen and it is draggable. So can I place it just below the filter icon and make it static too? I have already tried some css codes, but the prompt box was unaffected. Do you think it is possible to do till design studio v1.5 ?



    • Hi,

      basically also the prompt dialog can be oeverwritten. I have made small test. you need:

      * app with one data source with mandatory variable - this brings up the prompt dialog

      * create CSS file and connect to your app.

      the effect is:


      achieved by adding this CSS (it is based on ID, so you can make it better):

      /* Custom CSS */

      #__row1_zenDlgTitleCellTextView {

        font-size: 40px!important;

        background-color: yellow!important;


      you see, this is how you can load the CSS and by finding the right html tags overwrite some parts. Of course I belive not all are easy to overwrite and you need to consider also that this dialog can change some day and it will break your layout.


      • Hey Karol,


        I was trying to fix the position of the prompt dialogue box. Your code was very helpful. I did it successfully using the code below:


        top: 120px !important;

        left: 10px !important;


        Thank you for your time.


  • Hi Karol,

    Do you know how the messages from the message box can be exported or how to view more than 15 messages in the message popup?


    thanks and regards,

  • Hi All,

    has anyone tried to read a message from the list of messages and to display it in a textbox on the screen?

    What I mean: instead of pushing the user to click on the messages button to call the standard message popover, to access the list of messages using java-script, and to extract the needed message from there and to show it on the screen straight away. So the user doesn't need to click on the standard button to see if there is an important info for him.

    This is needed when using planning objects in Lumira, such as a planning sequence. So if a message was passed from the planning sequence, I would like to read it and to show it to the user on the main screen.

    Thanks in advance,