Resize FacesMessage, Change look n feel of Message Box using ADF Skin

Sharing is Caring

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like an error, warning or confirmation. In this post, I’ll show you how to resize FacesMessage.
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 its looks 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-width The 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-height The 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

Resize FacesMessage

So these are the selectors to change the style of FacesMessage, Try and find some more and let us know 🙂

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

0 thoughts on “Resize FacesMessage, Change look n feel of Message Box using ADF Skin”

Leave a Reply

Your email address will not be published. Required fields are marked *