Duplicated header in Scrollable p:datatable

[kukeltje]

Me neither, that's why in one one of my first posts referred to custom css. <self_censored />

[Iampenguin]

This duplicated header appears when I'm printing the page. If I remove the stickyheader attribute it doesn't show a random header in the middle of table.

[jameyel.johnson]

I am having a similar issue. Per Optimus Prime's comment I noticed that the alignment of my header columns to the table body was off when I set

Code: Select all

.ui-datatable-scrollable-theadclone {
	display: none;
}

on the .ui-datatable-scrollable-theadclone. When I leave it as default, there is what looks like an extra border at the bottom of the column headers. Even when I set height to 0 in the css, when I look at the Inspector (developer tools in browser) the .ui-datatable-scrollable-theadclone has a height of 6px.

I was able to remove the theadclone from the view by setting

Code: Select all

.ui-datatable-scrollable-theadclone {
	visibility: hidden;
}

in the css, but the gap is still there where the theadclone should be, and I have yet to find a way for the datatable data to fill that space.

I understand the need for the theadclone for alignment purposes, but there has to be a way to maintain its functionality without having to see it.

Thoughts?

[jameyel.johnson]

I've seen this post a few times. What I found is that the theadclone cells need a border for proper alignment, but it was making the clone itself extra thick, so I added the following css styles to make it smooth

.ui-datatable .ui-datatable-scrollable-theadclone > tr > th {
border: 1px solid transparent;
border-top-style: hidden;
}

[phuchoa0502]

All are done with me as below css:

Code: Select all

.ui-datatable-scrollable-theadclone {

    visibility: collapse;
}

[phuchoa0502]

All are solved with me as:

Code: Select all

.ui-datatable-scrollable-theadclone {

    visibility: collapse;
}

Hope can help.