Page 1 of 1

"Graphical" bug with p-dataTable

Posted: 16 Jun 2017, 14:26
by lne
Hi,

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>
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

Re: "Graphical" bug with p-dataTable

Posted: 19 Jun 2017, 10:03
by DarthMaul
Hi,

Could you please share some screenshots about the problem just to be clear?

Regards

Re: "Graphical" bug with p-dataTable

Posted: 19 Jun 2017, 10:07
by lne
How to add screenshot in this forum?
nothing for upload image?

Re: "Graphical" bug with p-dataTable

Posted: 21 Jun 2017, 08:27
by lne
Can not make screenshots, this problem appears on a tablet, not on the desktop

Re: "Graphical" bug with p-dataTable

Posted: 16 May 2018, 07:20
by mert.sincan
You can add a dropbox/google drive etc. link into your next comment.