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:
Firefox 4.0.1 capture d'écran:
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
Firefox 4 avec XHTML 1.0 Strict
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é?
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
Vous devez vous connecter pour publier un commentaire.
C'est clairement un CSS/JS question. Un défilement de table fixe avec des en-têtes est impossible en HTML (si
tbody { overflow: scroll; }
ont été pris en charge par tous navigateurs...). Beaucoup de différents CSS/JS solutions(hacks) a été inventée pour atteindre cet objectif. Je n'ai pas aperçu dans PF 3 source et je ne sais pas qui hack c'est à l'aide. Mais ce doit absolument être signalé à la PF, les gars. La seule chose que vous pouvez faire est de vérifier si vous êtes en utilisant le bon doctype HTML (lire: un stricte doctype) de sorte qu'au moins MSIE ne fonctionne pas dans en mode quirks.E. g. HTML5
ou XHTML 1.1
ou XHTML 1.0 Strict
ou peut-être XHTML 1.0 Transitional
Probablement PrimeFaces CSS est écrit avec XHTML 1.0 Transitional à l'esprit. N'est-ce pas travailler pour vous aussi? Ensuite, le signaler comme un PF bug.
Publié sur primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=13509 par leurs règles pour défaut de déclaration. Va ajouter à leur défaut de tracker quand j'ai le ok à partir d'un PF développeur.
OriginalL'auteur
La question est abordée ici, sur la PrimeFaces forum de support.
À compter d'aujourd'hui (20 juillet 2011), le problème peut maintenant être vu dans les Laboratoires Showcase organisé par PrimeFaces lors de l'utilisation de Internet Explorer 7.0 pour l'afficher:
EDIT: Fixé aujourd'hui PrimeFaces 3.0-M3-INSTANTANÉ nightly build (22 juillet 2011).
Je suis aussi confronté à ce problème avec Primefaces 5.1
OriginalL'auteur
J'ai eu ce même ennuyeux, mal alignées-tête et pied de problème sur deux projets avec PF 3.4.1.
Jouer avec l'en-tête n'a pas aidé.
Semble être fixé en PF 3.5.
OriginalL'auteur