Dynamically set max-height for rich:extendedDataTable

I am having problems with the max-height in a rich:extendedDataTable using RichFaces 3.3.3 final.

I would like the table to have a max height, and if the table doesn't fill this height 开发者_StackOverflow中文版(the number of rows is generated dynamically), the table shrinks.

If I define a height on the table, the table will always be that size regardless of if I don't have enough elements to fill the table.

There is some css to make the height dynamic:

     .rich-extdt-maindiv {
           height: auto !important;
      }

      .rich-extdt-maindiv, .extdt-innerdiv {
           position: relative !important;
      }

      .extdt-outerdiv {
           height: auto !important;
           overflow: visible !important;
      }

      .extdt-content {
           height: auto !important;
           max-height: 200px;
      }

(taken from http://community.jboss.org/wiki/ExtendedDataTableDynamicHeightAndJIRABugRF-7488)

However, I want to be able to change the max-height (multiple differently sized tables on one page).

Also if I use this css it overrides all other heights for any other extendedDataTable.

What I am doing currently is this:

height="#{bean.listSize > 0 ? bean.listSize * 19 + 32 > 291 ? 291 : bean.listSize * 19 + 32 : 0}"

for the height, where 19 is the row height 32 is the header height and 291 is the max height I want on the table.

This is not an ideal solution, as I want a solution that'll work when individual row sizes are different.

I could not get a JavaScript call working with f:verbatim or something like that (see How to embed and call a javascript script in a RichFaces/JSF page), but this isn't a good solution because setting the max height would set the max height for every table on the page.

Does anybody have a better solution?

The more I try to figure this out, the more I believe that extendeDataTable is limited. I cannot think of a solution to this, however I'm noticing tables in this program that have different sized rows. This is a feature that seems common sense to implement, yet there is no way to do this.

One final update:

I could not get anything to work out. I am still using that height function above, it's easy to understand and easy to control on a per page basis. The "19" pixel value may need to be changed based on what items you have in a row to make the row thicker.

With this solution, I didn't want to get wrapping in the cells because the height is based on the number of rows. This adds a little "..." at the end of the row.

I added a rich:toolTip (or my own tooltip because I'm starting to doubt richfaces) that displays the rest of the content in the cell on a mouseover. Not the best solution, but it works for what we need.

And this is the CSS that you need:

.rich-extdt-maindiv, .extdt-innerdiv {
     position: relative !important;
}

.extdt-outerdiv {
     overflow: visible !important;
}

The other css in the original file was to control the height. They overrode it in that the height was dynamic and controlled the max-height with one tag. It's a perfect solution if you don't want dynamic max height.

Another option is, if you only have one table per page, is to use jQuery to change the max-height for .extdt-content. Not an option for me because we have multiple per page.

Hope this helps somebody else.

The height statement is not cross-browser compatible.