Align Richfaces 3 modal panel on the right side

Goal

To have a Richfaces 3 modal panel aligned on the right side

Description

In one of my projects, there was the need to show a modal panel to display global messages to the user. This feature was implemented with the use of Richfaces modal panels. This was more or less simple to implement. However, doing so with a right side aligned panel was not that simple (Why the hell wasn’t that a simple thing to do?!!! Maybe it’s just me but I couldn’t find an easy way to do it. Therefore, I had to do some research and some tests to reach to the point in which I believe a simple recipe may be useful to someone else too!)

How to

Use Javascript to determine the size of the window. Then, remove the size of your popup panel, added with some margin value so that there is some space between the popup panel and the right side of the page.

This idea lead me to the following implementation (the expression elFunctions.global checks if there are any global messages associated to the FacesContext and the showGlobalMessages is a flag that controls if the global messages should be shown or not. In my specific situation, when the error page is shown, I decided not to show the messages panel but, instead, show all error messages in the error page’s body instead!):

<rich:modalPanel id="messagesPanel"
  showWhenRendered="#{elFunctions.global and showGlobalMessages != 'false'}"
  onshow="movePopupToRightSide('messagesPanelCDiv');autoHideMessagePanel()" 
  top="0" autosized="false"
  width="250" height="100" resizeable="false" 
  moveable="false"
  shadowOpacity="0">
  <f:facet name="header">#{messages['label.messages.title']}</f:facet>
  <f:facet name="controls">
    <h:panelGroup layout="block">
      <i title="#{messages['operation.close']}" 
      onclick="Richfaces.hideModalPanel('messagesPanel');" />
    </h:panelGroup>
  </f:facet>
  <rich:messages id="messages" globalOnly="true"
    styleClass="message" errorClass="errormsg"
    infoClass="infomsg" warnClass="warnmsg" />
</rich:modalPanel>

The javascript/JQuery function that calculates the left position of the panel is as simple as the following:

function movePopupToRightSide(popupId) {
  var windowWidth = document.documentElement.clientWidth;
  var panelSize = jQuery('#' + popupId).width();
  var popupSizeWithMargin = panelSize + 40;
  jQuery('#' + popupId).css({
    "position": "absolute",
    "top": 0,
    "left": windowWidth - popupSizeWithMargin,
  });
}

Explanations

Anytime the panel is shown, the left position is calculated and set to that panel, leading us to the expected result. This is the simplest solution I found but, certainly, there are more ways to do this. If you are aware of other ways to achieve this result and are interested in sharing, please reply to this recipe 🙂

3 comments

    1. I had tried that before but no success… 😦
      However, it seems the problem was related to the position attribute (it should be fixed instead of absolute) – thanks, Bruno Gonçalves (now, I am feeling a bit dummy! Lol)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s