ExtendedDataTable dynamic height and JIRA Bug RF-7488

Version 1

     

    RichFaces FAQRichFaces Components FAQData Iteration Components FAQ

     

    Here is what we propose as possible workaround:

     

     

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <f:view contentType="text/html">
    <head>
    <style type="text/css">
    .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;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    ExtendedDataTable.DataTable.prototype.OnWindowResize = function() {};
    </script>
            <h:form>
                <rich:extendedDataTable id="users" value="#{forum5Bean.lotOfData}" var="user"
                    width="300px" rows="4" reRender="datascroller">
                    <f:facet name="header">
                        <h:outputText value="Users List" />
                    </f:facet>
                    <rich:column sortBy="#{userName}">
                        <f:facet name="header">
                            <h:outputText value="User Name" />
                        </f:facet>
                        <h:outputText value="#{user}" />
                    </rich:column>
                    <f:facet name="footer">
                        <rich:datascroller id="datascroller" for="users"
                            selectedStyle="font-weight:bold" />
                    </f:facet>
                </rich:extendedDataTable>
            </h:form>
    </h:form>
    </body>
    </f:view>
    </html>
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:f="http://java.sun.com/jsf/core"
         xmlns:h="http://java.sun.com/jsf/html"
         xmlns:rich="http://richfaces.org/rich"
         xmlns:a4j="http://richfaces.org/a4j">
    
    <f:view contentType="text/html">
         <head>
              <style type="text/css">
              .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;
              }
              </style>
         </head>
    
         <body>
              <script type="text/javascript">
              ExtendedDataTable.DataTable.prototype.OnWindowResize = function() {};
              </script>
    
            <h:form>
                <rich:extendedDataTable id="users" value="#{forum5Bean.lotOfData}" var="user"
                    width="300px" rows="4" reRender="datascroller">
                    <f:facet name="header">
                        <h:outputText value="Users List" />
                    </f:facet>
                    <rich:column sortBy="#{userName}">
                        <f:facet name="header">
                            <h:outputText value="User Name" />
                        </f:facet>
                        <h:outputText value="#{user}" />
                    </rich:column>
                    <f:facet name="footer">
                        <rich:datascroller id="datascroller" for="users"
                            selectedStyle="font-weight:bold" />
                    </f:facet>
                </rich:extendedDataTable>
            </h:form>
         </h:form>
    
         </body>
    </f:view>
    </html>
    
    Table height is controlled by max height.
    Also I had to switch off table reflowing in JavaScript because it caused infinite loop in IE7. This will disable setting size in percents.

     

     

    This document was generated from the following discussion: ExtendedDataTable dynamic height and JIRA Bug RF-7488