header not aligning with columns when scrollable enabled

[kirilmicev]

Hi,

I was having the same problem, but I was looking in the wrong place... maybe is the same case that you have. I'm using a UI based in bootstrap, so I chose the bootstrap theme provided by primefaces (required a lot of customization , but it looks good), after trying differents alternatives found on the web that didn't work at all, I came up with the conclusion that the problem was a style interference between bootstrap css stylesheet and primefaces datatable dimensions logic.

In this particulary scenario, the style was box-sizing (-webkit-box-sizing, -moz-box-sizing). Bootstrap css change the default value to border-box, so when I applied the style box-sizing: content-box to the datatable, everything worked like a charm.

Maybe is not your exact scenario, but I hope it helps.

by the way this is my technology stack: Primefaces 4.0, JSF 2.1 (Mojarra 2.1.6), Glassfish 3.1.2.2, Omnifaces 1.5, CSS3/Bootstrap 3.0.2.

Can you please tell me where you make this changes in code?

[kukeltje]

Create css that explicitly references the components that have problems or do it inline. All basic css

[magsam]

my solution with the stylClass horscroll

Code: Select all

<p:dataTable styleClass="ui-corner-all horscroll" id="tab2"
						var="var" emptyMessage="#{msg['keinsaetze']}"
						value="#{disposition.dispoartikelauswahl}" scrollable="true"
						scrollWidth="99%" selection="#{disposition.selectedModell}"
						scrollHeight="550" rowIndexVar="rowIndex" liveScroll="true"
						scrollRows="40"
						rowStyleClass="#{var[9] gt   1.24   ?  'old' :  (var[8] gt  1.1   ?  'old' : null)  }"
						rowKey="#{var[0]}">

and the css

Code: Select all

.horscroll.ui-datatable table {
	table-layout: fixed !important;
}

[bodabela]

The unaligned header comes with stickyHeader="true" too. The cause if that the header is cloned inorder to provide such features, which is ok.

The problem comes when you put some sort of style onto the table like tableStyle="table-layout: auto". In this case the original header is fine , but the cloned one is unaligned. (If you hide the colned one you may see that the original header is there and it is ok).

Probably the clone of the header should be done with calculated header widths based on the original column widths.

So if you use any cloned-header feature then you should go with tableStyle="table-layout: fixed" or something else that fixes your table column widths.

This issue is still there in PF 6.0.

[Mr_Bob]

Having the same issue when scrollable="true" and wanting to have columns with non-fixed widths, I've made the following fix by using JavaScript in my page template:

Code: Select all

$(window).resize(function()
{
	adjustTableHeaders();
});

function adjustTableHeaders()
{
	$(".ui-datatable-scrollable").each(function(){
		headerCols = $($(this).find(".ui-datatable-scrollable-header-box tr")[0]).find("th"),
				bodyCols = $($(this).find(".ui-datatable-scrollable-body tr")[1]).find("td");
		$(headerCols).each(function(){
			$(this).width($(bodyCols[$(this).index()]).width());
		});
	});
}

It simply updates widths of header columns to widths of data columns in corresponding table . The update is done on page resize. Hope this sort of solution will help someone who stumble with this issue.

[Mr_Bob]

As already spoken, the issue is caused by the fact that header is located in separate table and is not updated when the table with data does.

Having the same issue when scrollable="true" and wanting to have columns with non-fixed widths, I've made the following fix by using JavaScript in my page template:

Code: Select all

$(window).resize(function()
{
	adjustTableHeaders();
});

function adjustTableHeaders()
{
	$(".ui-datatable-scrollable").each(function(){
		headerCols = $($(this).find(".ui-datatable-scrollable-header-box tr")[0]).find("th"),
				bodyCols = $($(this).find(".ui-datatable-scrollable-body tr")[1]).find("td");
		$(headerCols).each(function(){
			$(this).width($(bodyCols[$(this).index()]).width());
		});
	});
}

This code simply updates widths of header columns to widths of data columns of corresponding table. The update is done on page resize which was sufficient for my case. Hope this fix may help someone who stumbles with this issue.

[NourDev]

I have the same issue also with primefaces 6.1.

Any other solutions please ?

Thanks.

[NourDev]

Hi,
Please,have we an enhancement in the last version ?

Thanks.

[kukeltje]

6.2RC-1 can be downloaded... Just try...