Alex Rivera | Logout

Rich Extended DataTable column widths

Asked 2009-11-08T14:45:30.280
12

I have issue with RichFaces extended dataTable

If the columns are more say 20, instead of giving a horizontal scroll bar, the columns are getting compressed.

I tried giving column width in %, px .But no use.

Anyone familiar with this?

<rich:column label="Select" sortable="false" width="10%">
  <f:facet name="header"> 
    <h:selectBooleanCheckbox id="chk" align="center"
      value="#{bean.selectAll}" onclick="selectAll();"/>
  </f:facet>
  <input id="part_#{rowKey}" type="checkbox"
    name="selectedParts" value="#{listVar.id}" />
</rich:column>
jsf richfaces
Edit
Report

1 Answer

12

<rich:extendedDataTable> really doesn't handle horizontal scrolling very well. In fact, it seems like the developers set out to make horizontal scrolling next to impossible.

You can put <rich:extendedDataTable> in a <div> with horizontal scrolling enabled, but it's not going to work if you leave it at that. One of the nested <div>s in <rich:extendedDataTable> (div.extdt-innerdiv) is absolutely positioned, removing it from the flow of the document.

For reference, this is the basic output structure of <rich:extendedDataTable>, assuming three <rich:column> elements with a width of 100px and two records:

<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
    <div id="form_id:edt_id:od" class="extdt-outerdiv">
        <div id="form_id:edt_id:innerd" class="extdt-innerdiv">
            <table id="form_id:edt_id:tu" class="extdt-table-layout">
                <colgroup id="form_id:edt_id:colgroup:header">
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                </colgroup>
                <thead id="form_id:edt_id:header" class="extdt-thead">
                    <tr class="extdt-subheader rich-extdt-subheader">
                        <th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
                        <th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
                        <th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
                    </tr>
                    &
answered 2010-02-02T18:54:02.460

Your Answer