Skip to Content
Karol Kalisz
Karol Kalisz
August 11, 2014 1 minute read

Modification of Design Studio Message Popup

Follow RSS feed
2 Likes 1,511 View 12 Comments

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.

Message_Default.png


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

Message_Resized.png

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.

Assigned tags

Related Blog Posts

    Related Questions

      12 Comments
      You must be Logged on to comment or reply to a post.
        • Karol Kalisz Post author

          Hello Juan,

          yes, this should be possible by:

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

          or

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

          visibility: hidden;


          Regards, Karol

      • Giulia Sogaro

        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?

        Regards,

        Giulia Sogaro

          • 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

      • Former Member

        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 ?

        Thanks,

        Ganesh

        • Karol Kalisz Post author

          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:

          pro1.PNG

          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.

          Karol

          • Former Member

            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:

            #prompt_div_id{

            top: 120px !important;

            left: 10px !important;

            }

            Thank you for your time.

            ~Ganesh

      • Maria Ruseva

        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,
        Maria