Follow by Email

Wednesday, 26 April 2017

ADF Skinning : Resize FacesMessage, Change look n feel of Message Box


We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel


Default FacesMessage looks like this


As we can see that for a small text message it shows a big dialog box that looks weird so to control sizing of FacesMessage we need to override af:dialog CSS

Use this CSS to resize dialog box according to message text

-tr-default-content-widthThe root style, af|dialog, contains skinning property "-tr-default-content-width" that provides the default contentWidth if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.
-tr-default-content-heightThe root style, af|dialog, contains skinning property "-tr-default-content-height" that provides the default contentHeight if not provided when stretching is turned on, "stretchChildren=first". The default is 250 pixels.

af|dialog{
  -tr-default-content-width : -1;
  -tr-default-content-height : -1;
}

After applying skin it looks like this

It looks good , Now we can do some more changes in CSS

af|dialog {
    -tr-default-content-width: -1;
    -tr-default-content-height: -1;
    background-color: Highlight;
    border-color: #006262; 
}
af|dialog::title {
    color: #002e4e;
}

Output is

Now if you don't want that OK button on dialog then just add few more lined in CSS

af|dialog::footer-content af|button {
    visibility: hidden;
}

Output is


So these are the selectors to change style of FacesMessage , Try and find some more and let us know :)
Cheers :) Happy Learning

10 comments :

  1. very helpful post Sir thank you so much

    ReplyDelete
  2. Hi,
    Thank you, this will be very useful for me.
    I have a question: I am calling programmatically facesmessage. Let me know this code will work or not?

    ReplyDelete
    Replies
    1. Hi,
      Thanks, For Programmatically Facesmessage Resize is working now I check it.
      Thank you very much

      Delete
    2. Yes this skinning is for programmatic FacesMessage :)

      Delete
  3. Thanks Ashish for this, I was looking for message skinning

    ReplyDelete
  4. With which steps did you reach this solution?

    ReplyDelete
    Replies
    1. I can't really tell the steps , Followed ADF Faces Components Skin doc and skin editor for trying different combination

      Delete
    2. and no googling like "resize facesmessage popup"?

      Delete
    3. I am not getting what you really want to know, Why don't you use your name ?
      and for your information I have followed this doc Selectors for Skinning ADF Faces Components

      Ashish

      Delete