title: Dynamically set max-height for rich:extendedDataTable
body: <p>I am having problems with the max-height in a rich:extendedDataTable using RichFaces 3.3.3 final.</p>
  
  <p>I would like the table to have a max height, and if the table doesn't fill this height (the number of rows is generated dynamically), the table shrinks.  </p>
  
  <p>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.</p>
  
  <p>There is some css to make the height dynamic:</p>
  
  <pre><code>     .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;
        }
  </code></pre>
  
  <p>(taken from <a href="http://community.jboss.org/wiki/ExtendedDataTableDynamicHeightAndJIRABugRF-7488" rel="nofollow noreferrer">http://community.jboss.org/wiki/ExtendedDataTableDynamicHeightAndJIRABugRF-7488</a>)</p>
  
  <p>However, I want to be able to change the max-height (multiple differently sized tables on one page).</p>
  
  <p>Also if I use this css it overrides all other heights for any other extendedDataTable.  </p>
  
  <p>What I am doing currently is this:</p>
  
  <pre><code>height="#{bean.listSize &gt; 0 ? bean.listSize * 19 + 32 &gt; 291 ? 291 : bean.listSize * 19 + 32 : 0}"
  </code></pre>
  
  <p>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.<br>
  This is not an ideal solution, as I want a solution that'll work when individual row sizes are different.  </p>
  
  <p>I could not get a JavaScript call working with f:verbatim or something like that (see <a href="https://stackoverflow.com/questions/2973603/how-to-embed-and-call-a-javascript-script-in-a-richfaces-jsf-page">How to embed and call a javascript script in a RichFaces/JSF page</a>), but this isn't a good solution because setting the max height would set the max height for every table on the page.  </p>
  
  <p>Does anybody have a better solution?</p>
  
  <p>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.</p>
  
  <p>One final update:  </p>
  
  <p>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.  </p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>And this is the CSS that you need:</p>
  
  <pre><code>.rich-extdt-maindiv, .extdt-innerdiv {
       position: relative !important;
  }
  
  .extdt-outerdiv {
       overflow: visible !important;
  }
  </code></pre>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>Hope this helps somebody else.</p>
  
  <p>The height statement is not cross-browser compatible.</p>