How to limit height of JSF 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)

score 2 · Answer 1 · answered Nov 05 '10 at 13:46

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" />

answered Nov 05 '10 at 13:46

BalusC

1,082,665
372
3,610
3,555

I tried that using firebug changing the style directly on the browser, bu the messages get rendered outside of the region designated to them. – ChRoNoN Nov 05 '10 at 14:13
Yes .. Please elaborate more in developer's perspective and not in enduser's perspective. – BalusC Nov 05 '10 at 14:39
I was able to workaround the problem by changing the wrapping class (the tag I use inherents the JSF tag). I add a
element wrapping the original and setting its style to "overflow:auto; max-height: 100px"
– ChRoNoN Nov 05 '10 at 15:39
Sounds overcomplicated. Are you familiar with basic HTML/CSS? Did you look in the generated HTML output? How does it look like for `h:messages`? Maybe you've set `layout="table"` which causes that it renders `
` instead of `
` for which the CSS should have been applied differently.
– BalusC Nov 05 '10 at 17:19
I'm not at work right now. I think it was generated with , but I remember seeing some
- in the middle of the html also. The wrapped class if you look the answer I posted uses a LayoutComponent implementation. I believe that is the thing adding the
. Also the class attribute for the tags are a little weird. I found solution, its not pretty, but it works. Thanks for the replies.

– ChRoNoN Nov 07 '10 at 14:30

`LayoutComponent` is not part of standard JSF implementation. You seem to be using a 3rd party JSF component library which I don't recognize. After all, it seems to boil down to ignorance about CSS. For CSS it's important to know how the generated HTML source code look like (open page in browser, do *View Source* and base your CSS on it). The JSF source code is irrelevant to CSS. – BalusC Nov 07 '10 at 15:07

ChRoNoN · Accepted Answer · 2010-11-05T15:52:47.503

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);
  }
}

How to limit height of JSF component

2 Answers2