How to limit height of JSF <h:messages> component

Question

I have the wrapped into my own faces component. Right now we found that when adding several messages the are of the expands moving the actual page components to the very far bottom of the page.

It's not viable to change the 300 pages we have on this system. Tried to find way to limit the height of the <h:messages> by CSS with no success.

The bright side is that when adding messsages to the current faces context is required that caller uses a method from the super class. I was able to limit the messages, but my control variables are not reseting when the page is reloaded.

My question, is there any other way to limit the messages from faces context?

(using javaEE5, JSF 1.1, tomcat5)

Answer 1

Here is what I did to workaround the problem. As I said on my original post the component I use is wrapped. I overwrote the encodeBegin and encodeEnd to wrap the original h:messages with a div element:

import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlMessages;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.el.ValueBinding;

public class UIMessages extends HtmlMessages implements LayoutComponent {

  public void encodeBegin(FacesContext context) throws IOException{
    ResponseWriter writer = context.getResponseWriter();
    layout.startRow(writer);
    layout.startData(writer);
    writer.startElement("div", this);
    writer.writeAttribute("style", "overflow:auto; border:0px solid; max-height:100px;", null);
    super.encodeBegin(context);
  }

  public void encodeEnd(FacesContext context) throws IOException{
      ResponseWriter writer = context.getResponseWriter();
      super.encodeEnd(context);
      writer.endElement("div");
      layout.endData(writer);
      layout.endRow(writer);
  }
}

Answer 2

The h:messages renders by default an unordered list (<ul><li>). So to limit the height using CSS, you need to set a fixed height on the <ul> element and apply an overflow on y-axis it so that the users will still be able to scroll through it.

Basically:

.messages {
    height: 100px;
    overflow-y: scroll;
}

Apply it using styleClass attribute:

<h:messages styleClass="messages" />