ExtendedDataTable columns collapse in tab in ie8

[ufonaut]

On entry, our application creates a vast number of rich:tab panels.  To minimise load-up time, we don't want to load and render all the panels at once, but only as and when the user first enters them.

So we have tabs like the following:

<rich:tab>
  <a4j:support ajaxSingle="true" event="ontabenter"  immediate="true"
   reRender="#{myBean.onEnterRerenderBooks}"
    action="#{myBean.openBooks}" />
  <f:facet name="label">
    <h:outputText value="Books" />
  </f:facet>
   <a4j:outputPanel id="listBooks">

   <h:form id="myBooks">
    <h:panelGrid columns="1"  id="panelBooks" rendered="${myBean.openedBooks}">
      <rich:extendedDataTable id="myTableBooks" var="book"
       value="#{myBean.bookList}" height="140px" width="500px">
       <rich:column width="200px">
       <f:facet  name="header">
        <h:outputText styleClass="headerText"  value="Title" />
       </f:facet>
       <h:outputText  value="#{book.title}" />
      </rich:column>
      </rich:extendedDataTable>
    </h:panelGrid>
    </h:form>
  </a4j:outputPanel>
</rich:tab>

The idea is that the onEnterRerenderBooks will only render the outputpanel when first accessed.  The panelGrid will only be rendered when the panel is actually open.

All works fine in FF, but in IE8 revisiting a previously entered tab causes the table's columns to collapse to 20px (caused, looking at the HTML, by a colgroup with all width=20).

I'm attaching a test case, with a tabPanel holding 3 tabs - "nothing", "Books" and "Films".  The problem is replicated by clicking Books, then Films, then Books again (or Films/Books/Films if you must!).

Curiously, removing the DOCTYPE (ie. sending IE back into quirks mode) doesn't have the problem (but is not really a solution).

Environment is 3.3.3.CR1,JSF 1.2 (mojarra 1.2_10-b01-FCS),  Facelets 1.1.15 on JBoss 5.0.1

Message was edited by: Rob Acraman - fixed compiler error in MyBean in attachment

[ilya_shaikovsky]

1) Tried your sample. works fine for me at IE and FF. only chrome reported broken markup. So seems some invalid xhtml in your markup. After addition

<f:view contentType="text/html"> to the body - works everywhere fine.

2) created my own sample based on rf-demo:

     <h:form id="form">
          <h:panelGrid columns="2" columnClasses="top , top">
<rich:tabPanel switchType="client">
<rich:tab label="12332"></rich:tab>
<rich:tab label="123">
<a4j:support event="ontabenter" reRender="table">
     <a4j:actionparam name="rev" assignTo="#{userBean.visible}" value="#{true}"></a4j:actionparam>
</a4j:support>
<a4j:outputPanel id="table">
               <rich:extendedDataTable rendered="#{userBean.visible}"
                    value="#{extendedTableBean.capitalsDataModel}" var="cap" 
                    width="580px" height="400px"
                    sortMode="#{extendedTableBean.sortMode}"
                    selectionMode="#{extendedTableBean.selectionMode}"
                    tableState="#{extendedTableBean.tableState}"
                    selection="#{extendedTableBean.selection}">
                    <rich:column sortable="false" label="Flag" id="col_1">
                         <f:facet name="header">
                              <h:outputText value="Flag" id="flag"/>
                         </f:facet>
                         <h:graphicImage value="#{cap.stateFlag}" id="cap_state_flag"/>
                     </rich:column>
                    <rich:column sortable="true" sortBy="#{cap.state}" id="col_2"
                         filterBy="#{cap.state}" filterEvent="onkeyup" width="170px"
                         label="State Name">
                         <f:facet name="header">
                              <h:outputText value="State Name" id="state_name"/>
                         </f:facet>
                         <h:outputText value="#{cap.state}" id="cap_state"/>
                    </rich:column>
                    <rich:column sortable="true" sortBy="#{cap.name}" id="col_3"
                         filterBy="#{cap.name}" filterEvent="onkeyup" width="170px"
                         label="State Capital">
                         <f:facet name="header">
                              <h:outputText value="State Capital" id="state_capital"/>
                         </f:facet>
                         <h:outputText value="#{cap.name}" id="cap_name"/>
                    </rich:column>
                    <rich:column sortable="false" label="Time Zone" id="col_4">
                         <f:facet name="header">
                              <h:outputText value="Time Zone" id="time_zone"/>
                         </f:facet>
                         <h:outputText value="#{cap.timeZone}" id="cap_time_zone"/>
                    </rich:column>
                    <a4j:support reRender="selectiontable" id="extended_table_bean_take_selection"
                         action="#{extendedTableBean.takeSelection}"
                         event="onselectionchange" />
               </rich:extendedDataTable>
               </a4j:outputPanel>
               </rich:tab>
</rich:tabPanel>               

And it looks fine also from the beggining.

[ufonaut]

Thanks for that, Ilya.  I'll try those when I get back to work.

I should have mentioned in the opening post that MyBean has to be session-scoped - it doesn't happen with just request.

[ufonaut]

Ah no, the sample from rf-demo rerenders the table, which is what we were hoping to avoid.

Were you able to reproduce the problem with a session-scoped MyBean ?

[ilya_shaikovsky]

1) my bean which keeps rendered  - session scoped.

2) I reRender toutputPanel around the table and see the same in your case.