CODEWITHSUNDEEP
jsfprimefacesinternet-explorer-8
ramo102
ramo102

Reputation: 515

p:dataList rendering in Internet Explorer 8

my page contains a data list within another data list. The outer data list simulates an accordion panel, while the inner data list renders my dynamic columns.

Everything works fine, but Internet Explorer 8 behaves differently in respect of Firefox and Chrome, because in the resulting html it renders some empty objects that leaves a blank space before data.

The screenshots show the differences between Explorer 8 and Firefox.

Firefox generated HTML: https://dl.dropboxusercontent.com/u/7865852/col_din_firefox.png

Explorer 8 generated HTML: https://dl.dropboxusercontent.com/u/7865852/col_din_ie8.png

Firefox rendering: https://dl.dropboxusercontent.com/u/7865852/col_din_rendered_firefox.png

Explorer 8 rendering: https://dl.dropboxusercontent.com/u/7865852/col_din_rendered_ie8.png

Here is the code:

<p:dataList id="data" styleClass="myDataList" value="#{bean.getAnag(idSito)}" var="tipologia" itemType="disc" type="definition">
  <div class="ui-accordion ui-widget ui-helper-reset ui-hidden-container tabAccordion" style="width: 100%;">
    <table id="accordionFake#{idSito}" border="1" class="table-din-col" style="display: none; margin-bottom: 10px;">
      <!-- HEADERS -->
      <tr class="table-din-col-titolo">
        <td style="padding: 4px;">
          <h:outputText value="Codice" />
        </td>
        <td style="padding: 4px;">
          <h:outputText value="Descrizione" />
        </td>
        <td style="padding: 4px;">
          <h:outputText value="CodiceAgg" />
        </td>
        <td style="padding: 4px;">
          <h:outputText value="Pos" />
        </td>
        <p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
          <td>
            <h:outputText value="#{colDin.header}" />
          </td>
        </p:dataList>
      </tr>
      <!-- HEADERS -->

      <!-- ROWS BUILDING -->                        
      <p:dataList id="dataL" var="rilevazione" selectionMode="single"
                value="#{bean.getLsLoc(idSito)}" type="definition">
        <tr class="table-din-col-righe">
          <td class="table-din-col-colonne">
            <h:outputText id="codice" value="#{rilevazione.codice}" />
          </td>
          <td class="table-din-col-colonne">
            <h:outputText id="desc" value="#{rilevazione.descrizione}" />
          </td>
          <td class="table-din-col-colonne">
            <h:outputText id="codSnam" value="#{rilevazione.codiceAgg}" />
          </td>
          <td class="table-din-col-colonne">
            <h:outputText id="pos" value="#{rilevazione.pos}" />
          </td>

          <p:dataList value="#{bean.buildColumns(idSito)}" var="colDin" type="definition">
            <td class="table-din-col-colonne">
              <h:outputText value="#{colDin.property.valore}" />
            </td>
          </p:dataList>
        </tr>
      </p:dataList>
      <!-- ROWS BUILDING -->
    </table>
  </div
</p:dataList>

How can I instruct ie8 to correctly render the data lists?

Thanks in advance.

Upvotes: 0

Views: 696

Answers (1)

BalusC
BalusC

Reputation: 1108632

It look like you was using the wrong component for the purpose, or are at least not understanding/familiar with basic HTML.

The <p:dataList> gives you the option to generate a HTML <ul><li> (unordered list), <ol><li> (ordered list) or <dl><dt><dd> (definition list).

However, you seem to be after generating a plain vanilla HTML <table><tr><td> with all cells hardcoded. You have nested a <p:dataList type="definition"> inside <tr> which would only generate <dl><dt><dd> elements inplace where <td> elements are expected. This only ends up in illegal HTML syntax. IE is rather sensitive to that.

You should replace the nested <p:dataList type="definition"> components by <ui:repeat>. It doesn't generate any HTML and your HTML will end up syntactically valid (although I wonder how it makes sense to have a <dl><dt><dd><table>, after all, I suggest to learn basic HTML as well, so that you can better understand which JSF components to pick for the purpose).

Upvotes: 1

Related Questions