"Graphical" bug with p-dataTable
Posted: 16 Jun 2017, 14:26
Hi,
I created a p-dataTable like this:
when the width of the p-dataTable is bigger of the with of the page, the background color of the header and paginator is applied only to the width of the p-dataTable instead of the width of the page.
So, when the p-dataTable is scrolled horizontally, the left part of the header and the paginator is blue and then, the right part is white.
This problem is reproducible on a tablet
I created a p-dataTable like this:
Code: Select all
<p-dataTable #dtAffectation [value]="affectations" selectionMode="single" [(selection)]="selectedAffectation" [paginator]="true" [rows]="5" [responsive]="true" [resizableColumns]="true" emptyMessage="Aucune données" [loading]="loadingAffectation">
<p-header>
<div class="ui-helper-clearfix">
<button type="button" pButton icon="fa-plus" style="float:left;height:27px;width:27px;" class="green-btn"></button>
<button type="button" pButton (click)="dtAffectation.exportCSV()" icon="ui-icon-file-download" style="float:left;margin-left:0.5em;height:27px;width:27px;"
class="orange-btn"></button>
</div>
</p-header>
<p-column [style]="{'width':'130px'}" field="date_debut" header="Date de début" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'120px'}" field="date_fin" header="Date de fin" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'80px'}" field="pourcent" header="%" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'90px'}" field="heure" header="Heures" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'120px'}" field="code_rh" header="Code RH" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'60px'}" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body">
<button type="button" pButton (mouseenter)="lovGrid.showDialog(row,'affectation','code_rh','code','denomination','section_desc_fr')"
(click)="lovGrid.showDialog(row,'affectation','code_rh','code','denomination','section_desc_fr')" icon="ui-icon-expand-more"
style="height:27px;width:27px;"></button>
</ng-template>
</p-column>
<p-column [style]="{'width':'200px'}" field="denomination" header="Dénomination" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
<p-column [style]="{'width':'60px'}" styleClass="col-button">
<ng-template let-row="rowData" pTemplate="body">
<button type="button" pButton (mouseenter)="lovTreeGrid.showDialog(row,'code_rh')" (click)="lovTreeGrid.showDialog(row,'code_rh')"
icon="ui-icon-more-vert" style="height:27px;width:27px;"></button>
</ng-template>
</p-column>
<p-column [style]="{'width':'200px'}" field="remarque" header="Remarque" [sortable]="true">
<ng-template let-col let-affectation="rowData" pTemplate="body">
<span [style.color]="affectation['back_color']">{{affectation[col.field]}}</span>
</ng-template>
</p-column>
</p-dataTable>
So, when the p-dataTable is scrolled horizontally, the left part of the header and the paginator is blue and then, the right part is white.
This problem is reproducible on a tablet