Page 1 of 2
header not aligning with columns when scrollable enabled
Posted: 14 Jun 2013, 15:40
by jimmybondy
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
Re: header not aligning with columns when scrollable enabled
Posted: 14 Jun 2013, 16:13
by kukeltje
why you have the overflow auto? try adding table-layout: fixed instead
Re: header not aligning with columns when scrollable enabled
Posted: 14 Jun 2013, 17:09
by jimmybondy
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> ...
Re: header not aligning with columns when scrollable enabled
Posted: 15 Jun 2013, 00:57
by vineet
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.
Re: header not aligning with columns when scrollable enabled
Posted: 05 Nov 2013, 15:55
by andrew86
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.
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>
Re: header not aligning with columns when scrollable enabled
Posted: 21 Jan 2014, 18:14
by jose.aleman
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.
Re: header not aligning with columns when scrollable enabled
Posted: 22 May 2015, 14:27
by koc
I've fixed it by putting style="min-width:100px" to p:column
Re: header not aligning with columns when scrollable enabled
Posted: 09 Jun 2015, 17:04
by tonytrjdung
Ok, thanks a lot koc. I fixed
Re: header not aligning with columns when scrollable enabled
Posted: 25 Aug 2015, 19:09
by jgraf
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
Re: header not aligning with columns when scrollable enabled
Posted: 23 Sep 2015, 08:12
by PhiHDN
I am facing same issue.
I tried above solutions but all of them do not work.
Does anyone have other solution?
Thanks!