4 Replies Latest reply on May 5, 2011 6:08 AM by Mario Romero avila

    Delete <div> element surrounding <table> in rich:datatable

    Mario Romero avila Newbie

      Hello, I´m working with a rich:datatable and while trying to apply some custom scrollbars, I noticed that the rich:datatable surrounds the <table> element with a <div> element with the style "overflow:auto", which creates it´s owns scrolls when there is not enough space. Example below:

       

       

                     columns...     

       

      I don´t have much idea yet on how styles works, but I don´t know how to erase this div, and the div doesn´t reference any class style which I could override to hide it.

       

       

      I´m using Richfaces 3.3.1. Any ideas? Thanks.

        • 1. Re: Delete <div> element surrounding <table> in rich:datatable
          Mario Romero avila Newbie

          Sorry, I botched the example and can´t edit the first post. This is the correct HTML output from the rich:datatable:

           

          <div id="MyOwnDiv" style="overflow: auto; max-height: 400px;">
               <div id="MyTable_table_content" style="overflow: auto;" onscroll="syncScroll('MyTable_table_header', 'MyTable_table_content')">
                    <table frame="border" ...
                         columns...
                    </table>
               </div>
          </div>

           

          I want to be able to omit the div named "MyTable_table_content" which is generated automatically.

          <div style="overflow: auto; max-height: 400px;"><div id="tablaMasivos_table_header" style="overflow: hidden;"><table frame="border"
          • 3. Re: Delete <div> element surrounding <table> in rich:datatable
            Mario Romero avila Newbie

            Ilya Shaikovsky escribió:

             

            please show your source page code.

             

             

            <a4j:outputPanel id="panel_resultList">

                   <t:div id="MyOwnDiv" style="overflow:auto;max-height:400px;width:98%">

                        <rich:dataTable id="MyTableId" frame="border" width="100%"                 

                                var="result" value="#{MyBean.resultList}" binding="#{MyBean.datatable}">

             

                            <f:facet name="header">

                                ...

                            </facet>

                            <rich:column>

                                ...

                            </rich:column>

                      </rich:datatable>

                 </t:div>

            </a4j:outputPanel>

             

            I noticed that the Div "MyTable_table_content" only appears when the table width is greater than the browsers available width, which in this case happens 90% of the time.

            • 4. Re: Delete <div> element surrounding <table> in rich:datatable
              Mario Romero avila Newbie

              Finally I had to modify the <div> style using javascript:

               

              <script type="text/javascript">

                      window.onload = function(){

                          document.getElementById('tablaMasivos_table_header').style.cssText='';

                          document.getElementById('tablaMasivos_table_content').style.cssText='';

                      };
              </script>



              <kernel:jsFunction name="cleanDivStyleDatatable"

                   oncomplete="document.getElementById('tablaMasivos_table_header').style.cssText='';

                                       document.getElementById('tablaMasivos_table_content').style.cssText=''">

              </kernel:jsFunction>

               

              And then call the function cleanDivStyleDatatable on the oncomplete event of the button which loads the table.

               

              It´s ugly, but at least works in both Firefox and IE7. Now I can always show the bottom scroll regardless of the vertical scroll position.