header not aligning with columns when scrollable enabled

UI Components for JSF
Post Reply
jimmybondy
Posts: 28
Joined: 30 Jan 2012, 17:21

14 Jun 2013, 15:40

We are facing the same problem and could not find any solution:

Our table ...
  • uses lazyDataModel
  • has multiple sorting enabled
  • has pagination enabled
  • has single selectionMode
  • has scrollable=true
  • fixed width for ALL columns using style attribute (currently style="width: 150px;", but also tried width attribute on column)

Table code:

Code: Select all

<p:dataTable id="resultList" value="#{searchBean.lazyDataModel}" var="entity"
        selectionMode="single" selection="#{searchBean.selectedEntity}" rowKey="#{entity.rdsEntityId}"
        scrollable="true" scrollHeight="350" style="overflow:auto"
        paginator="true" rows="15"
        paginatorTemplate="Page {CurrentPageReport} {FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="5,10,15,20,25,30,35,50" paginatorPosition="bottom" paginatorAlwaysVisible="false" 
        sortMode="multiple" 
        lazy="true" 
        draggableColumns="false" resizableColumns="false" >
Example for column code::

Code: Select all

<p:column sortBy="shortName" headerText="Short Name" rendered="#{searchBean.userRoleRDM}" styleClass="wrap" style="width: 100px;">
      <h:outputText value="#{entity.shortName}" escape="false" />
</p:column>
I have read the following threads and tried their solutions with no success: Also note:
  • The problem appears in IE8 (not in FF)
  • Using PF 3.5.0 and 4.0-SNAPSHOT
---------------------------------------------------------------------------------------------------------------
  • Mojarra 2.1.19 (20130213-1512) / JSF 2.1
  • PrimeFaces 3.5.0 and 4.0-SNAPSHOT
  • Apache Tomcat/6.0.35
  • Oracle JDK 1.6.0_43
[/color]
Top
kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

14 Jun 2013, 16:13

why you have the overflow auto? try adding table-layout: fixed instead
Top
jimmybondy
Posts: 28
Joined: 30 Jan 2012, 17:21

14 Jun 2013, 17:09

I have taken the overflow auto from this comment (leventgny)

Now, I tried adding table-layout: fixed with no success (using style and tableStyle)
Btw, this CSS property is already added to both tables (header and data table) through the ui-datatable-scrollable class
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Looking at the rendered code I see the calculated width for the table holding the header columns si different then the width for the columns in the content table:

table for header:

Code: Select all

<table role="grid">
  <thead id="mainForm:resultList_head">
    <tr role="row">
      <TH style="WIDTH: 224px" id=mainForm:resultList:j_idt47 class="ui-state-default ui-sortable-column" ...
      <TH style="WIDTH: 62px" id=mainForm:resultList:j_idt51  ...
      <TH style="WIDTH: 53px" id=mainForm:resultList:j_idt53  ...
      <TH style="WIDTH: 76px" id=mainForm:resultList:j_idt57  ...
      <TH style="WIDTH: 77px" id=mainForm:resultList:j_idt59  ...
      <TH style="WIDTH: 79px" id=mainForm:resultList:j_idt61  ...
      <TH style="WIDTH: 81px" id=mainForm:resultList:j_idt63  ...
      <TH style="WIDTH: 76px" id=mainForm:resultList:j_idt65  ...
      <TH style="WIDTH: 55px" id=mainForm:resultList:j_idt67  ...
      <TH style="WIDTH: 62px" id=mainForm:resultList:j_idt69  ...
      <TH style="WIDTH: 100px" id=mainForm:resultList:colStat  ...
      <tbody/>
      ...

main table:

Code: Select all

...
<table role="grid">
  <colgroup>	
    <COL style="WIDTH: 245px">
    <COL style="WIDTH: 83px">
    <COL style="WIDTH: 74px">
    <COL style="WIDTH: 97px">
    <COL style="WIDTH: 98px">
    <COL style="WIDTH: 100px">
    <COL style="WIDTH: 102px">
    <COL style="WIDTH: 97px">
    <COL style="WIDTH: 76px">
    <COL style="WIDTH: 83px">
    <COL style="WIDTH: 121px">
    <tbody class="ui-datatable-data ui-widget-content" id="mainForm:resultList_data">

    <tr class="ui-widget-content ui-datatable-even" role="row" aria-selected="false" data-rk="1000069615" data-ri="0">
      <TD style="WIDTH: 220px" role=gridcell> ...
      <TD style="WIDTH: 60px" role=gridcell> ...
      <TD style="WIDTH: 50px" role=gridcell> ...
      <TD style="WIDTH: 70px" role=gridcell> ...
      <TD style="WIDTH: 70px" role=gridcell> ...
      <TD style="WIDTH: 70px" role=gridcell> ...
      <TD style="WIDTH: 70px" role=gridcell> ...
      <TD style="WIDTH: 65px" role=gridcell> ...
      <TD style="WIDTH: 45px" role=gridcell> ...
      <TD style="WIDTH: 50px" role=gridcell> ...
      <TD style="WIDTH: 80px" role=gridcell> ...
---------------------------------------------------------------------------------------------------------------
  • Mojarra 2.1.19 (20130213-1512) / JSF 2.1
  • PrimeFaces 3.5.0 and 4.0-SNAPSHOT
  • Apache Tomcat/6.0.35
  • Oracle JDK 1.6.0_43
[/color]
Top
vineet
Posts: 387
Joined: 14 Oct 2011, 23:40

15 Jun 2013, 00:57

yes we are also facing the same issue . This is only on IE 8 where there the headers are shifted to the right as compared to the columns and it results into a empty whitespace in the end of the table.
Top
andrew86
Posts: 38
Joined: 24 Apr 2013, 16:16

05 Nov 2013, 15:55

I'm facing the same issue in Google Chrome. In the datatable with scrollable="true" the headers and the columns match perfectly in Firefox, but in Chrome if there are enough columns to spill trigger scrolling in the x direction, the headers will mis-align themselves.

In my application I'm using column groups in addition to dynamically generated columns. I assign widths to all of the respective elements to match each other, though it does not work in Chrome.

Image

Code: Select all

<p:dataTable id="blkVolTable" value="#{yardMaster.blockVolBlocks}" var="blockVolName" sortMode="single" rowKey="#{blockVolName}" scrollHeight="800" scrollable="true" selection="#{yardMaster.selectedBlkVol}" selectionMode="single" filteredValue="#{yardMaster.filteredBlockVolume}" >
						
	<p:ajax event="sort" listener="#{yardMaster.sortBlockVol}" update="blkVolTable" render="blkVolTable" />
	
	<p:columnGroup id="colGroup" type="header" >
	
		<!-- Top Row -->
		<p:row >
			<p:column colspan="1" width="20"  />
			<p:column colspan="3" headerText="Information" width="330" />
			<c:forEach items="${yardMaster.blockVolHours}" var="hour" >
				<p:column colspan="${hour.colspan}" headerText="${hour.hour}" width="${hour.colspan * 80}" />
			</c:forEach>
		</p:row>
		
		<!-- Bottom Row -->
		<p:row>
			<p:column  id="removeBlockH" width="15" />	
			<p:column id="blkNameH" headerText="Block Name" width = "130" sortBy="name" />
			<p:column id="totCarCountH" headerText="Total Cars" width = "100" sortBy="totalCarCount"/>
			<p:column id="invCarCountH" headerText="Inv Cars" width = "100" sortBy="invCarCount" />
				<c:forEach items="${yardMaster.blockInbTrains}" var="trn">
					<p:column width="90" headerText="${trn}"/>
				</c:forEach>
		</p:row>	
	</p:columnGroup>
	
	<!-- Data -->
	<p:column  id="removeBlockD" width="20">
		<p:commandLink id="removeBtn" event="submit" update="blkVolTable, :tabId:blkVol:blkAddSelect" render="blkVolTable, :tabId:blkVol:blkAddSelect" 
		actionListener="#{yardMaster.removeFromBlockVol(blockVolName.name)}">
			<p:graphicImage style="border:0; margin-left:-4px" value="resources/images/delete.png"/>
			<p:tooltip for="removeBtn" value="Remove this block from the display table"/>
		</p:commandLink>	
	</p:column>
	<p:column id="blkNameD"  filterBy="name" filterMatchMode="contains" sortBy="name"  width = "130">
		<h:outputText value="#{blockVolName.name}" />
	</p:column>
	<p:column id="totCarCountD"  width = "100">
		<h:outputText value="#{blockVolName.totalCarCount}" />
	</p:column>
	<p:column id="invCarCountD"  sortBy="invCarCount" width="100">
		<h:outputText value="#{blockVolName.invCarCount}"/>
	</p:column>
	<p:columns id="trnColumns" value="#{yardMaster.blockInbTrains}" var="col" width="80"
				columnIndexVar="colIndex" >
		<h:outputText  value="#{blockVolName.inbCarCounts[col]}"/>	
	</p:columns>
	
</p:dataTable>
Primefaces 4.0; JSF 2.1.24; Apache Tomcat 7.0.30; Mojarra 2.1.24; Omnifaces 1.5
Top
jose.aleman
Posts: 1
Joined: 21 Jan 2014, 17:45

21 Jan 2014, 18:14

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.
Top
koc
Posts: 3
Joined: 19 Jun 2014, 17:49

22 May 2015, 14:27

I've fixed it by putting style="min-width:100px" to p:column
Top
tonytrjdung
Posts: 1
Joined: 09 Jun 2015, 16:54

09 Jun 2015, 17:04

Ok, thanks a lot koc. I fixed
Top
jgraf
Posts: 4
Joined: 06 Aug 2015, 16:12

25 Aug 2015, 19:09

jose.aleman wrote: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.
fixed it for me - thanks!

-jim
PrimeFaces 5.3 - Mojarra 2.2.12 - Tomcat 8.0.30
Top
PhiHDN
Posts: 20
Joined: 28 Aug 2014, 09:54

23 Sep 2015, 08:12

I am facing same issue.
I tried above solutions but all of them do not work.

Does anyone have other solution?

Thanks!
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 56 guests