PrimeFaces 3.0 - <p:dataTable> les en-têtes ne sont pas en ligne avec l'aide de défilement=“true”

J'ai un JSF 2 webapp qui est à l'aide de PrimeFaces 3.0. Sur une page, je suis en utilisant le <p:dataTable> composant à l'intérieur d'un composite component pour afficher un tableau d'objets. J'ai eu du succès avec ce composant jusqu'à ce que j'ai essayé d'utiliser le scrollable="true" option. Maintenant la table des en-têtes de colonne ne s'alignent pas avec le contenu de la colonne. J'ai essayé d'utiliser IE 7 (qui est le navigateur cible pour mon client environnement) et Firefox 4.0.1 pour la comparaison. Les deux présentent le problème, mais il est plus prononcé dans IE 7.

IE 7 capture d'écran:

PrimeFaces 3.0 - <p:dataTable> les en-têtes ne sont pas en ligne avec l'aide de défilement=“true”

Firefox 4.0.1 capture d'écran:

PrimeFaces 3.0 - <p:dataTable> les en-têtes ne sont pas en ligne avec l'aide de défilement=“true”

Voici certains de mes Facelet code de la page:

<p:dataTable
        id="vesselsDataTable"
        value="#{cc.attrs.vesselAdapterList}"
        var="currentRow"
        selection="#{editVesselBean.selectedRow}"
        selectionMode="single"
        scrollable="true"
        height="500">
    <p:column
            id="imoColumn"
            style="width:45px"
            sortBy="#{currentRow.imo}">
        <f:facet name="header">
            <h:outputText value="IMO" />
        </f:facet>
        <div class="#{currentRow.imoStyleClass}">
            <h:outputText value="#{currentRow.imo}"
        </div>
    </p:column>
    <p:column
            id="notesIndicatorColumn"
            style="width:35px"
            sortBy="#{currentRow.hasNotes}">
        <f:facet name="header">
            <h:outputText value="#{bundle.labelNotes}" />
        </f:facet>
        <h:outputText 
            styleClass="noteIndicator"
            id="vesselNotesIndicator"
            value="#{bundle.stringNoteIndicatorText}"
            title="#{currentRow.notesAsTooltipText}"
            rendered="#{currentRow.hasNotes}"
    </p:column>
    <ui:remove>other column definitions omitted for brevity...</ui:remove>
<p:dataTable>

Chacun de mes colonnes a un style avec une largeur fixe en pixels défini, et le dataTable lui-même a l' height ensemble d'attributs. Cela semble être le même que ce qui est affiché dans la Vitrine de démonstration et dans le 2.2 manuel PDF.

De citer le manuel:

De défilement est une façon d'afficher les données fixes avec des en-têtes, pour activer le défilement simple jeu de défilement des options pour de vrai, de définir une hauteur fixe en pixels et de définir une largeur fixe pour chaque colonne.

Quelqu'un peut me dire ce que je fais mal?

Je suis en utilisant le courant PrimeFaces 3.0-M2-INSTANTANÉ avec le courant Mojarra 2.1 JSF RI.

Mise à JOUR

Que j'ai déménagé à la PrimeFaces De 3,0 M2 (pas instantané) communiqué de presse et le problème existe toujours. Suivant les suggestions de l'Érable et de BalusC, j'ai supprimé temporairement la colonne de tri et essayé différentes doc types. J'ai finalement réglé sur le XHTML 1.0 Strict doc type. Il ne montre aucune amélioration dans IE 7, mais ne montrent une certaine amélioration dans Firefox 4.

IE 7 XHTML 1.0 Strict

PrimeFaces 3.0 - <p:dataTable> les en-têtes ne sont pas en ligne avec l'aide de défilement=“true”

Firefox 4 avec XHTML 1.0 Strict

PrimeFaces 3.0 - <p:dataTable> les en-têtes ne sont pas en ligne avec l'aide de défilement=“true”

La <p:dataTable> est à l'intérieur d'un <p:panel> qui est à l'intérieur d'un <p:layout>. Cela pourrait-il être lié?

Il semble presque comme sur Firefox 4 que l'en-tête de compenser la différence est à peu près égale à la largeur de la barre de défilement. J'ai remarqué que vous avez un themeroller, cette en-tête de modification de la largeur à tous les lorsque vous changez de thème?
J'ai vérifié le Primefaces questions de la page code.google.com/p/primefaces/issues/list et n'ai pas trouvé ce problème répertorié comme un bug connu. On dirait qu'il pourrait être un problème de réglage des largeurs fixes à une colonne, sur un défilement dataTable, sur Firefox et les versions antérieures d'IE. Sur une note de côté, je VOUS REMERCIE de prendre le temps d'écrire clairement et de façon concise à la question. Je suis en train de devenir démoralisés par le nombre de terribles questions sur ce site.
Ce qui se passe lorsque vous retirez le sortBy attribut de la colonne. Peut-être il ya des styles CSS dans le bouton de tri des éléments du DOM qui obtiennent de la manière?
Merci pour vos commentaires d'Érable. Je pars pour le Canada de la Journée donc je vais prendre un coup d'oeil à ce nouveau le lundi au bureau.
J'ai supprimé tous les sortBy attributs dans les colonnes de ce tableau. Il n'a pas de résoudre le problème. Avec le tri, je peux voir que chaque en-tête de colonne est légèrement trop petit, avec de nombreuses colonnes de l'alignement est assez large à la fin.

OriginalL'auteur Jim Tough | 2011-06-30