"Graphical" bug with p-dataTable

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
lne
Posts: 48
Joined: 30 Mar 2017, 08:47

16 Jun 2017, 14:26

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

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

19 Jun 2017, 10:03

Hi,

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

Regards

lne
Posts: 48
Joined: 30 Mar 2017, 08:47

19 Jun 2017, 10:07

How to add screenshot in this forum?
nothing for upload image?

lne
Posts: 48
Joined: 30 Mar 2017, 08:47

21 Jun 2017, 08:27

Can not make screenshots, this problem appears on a tablet, not on the desktop

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 May 2018, 07:20

You can add a dropbox/google drive etc. link into your next comment.

Post Reply

Return to “Barcelona - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests