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

[damntry]

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.

[damntry]

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"

[ilya_shaikovsky]

please show your source page code.

[damntry]

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.

[damntry]

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.