Primeng: Prime ng datepicker inside prime ng datatable creates css issue (it hides inside the datatable)

[Shifs]

I'm submitting a bug report:

Prime ng date picker does not work properly inside the row of the prime-ng data table. I have a scenario where on click of edit inside row, a date picker opens. In certain scenarios, the date picker gets cut basically it get hides inside the datatable. I tried overriding CSS properties but all in vain.

Here is the screenshot for the same.

Please tell us about your environment:
Ubuntu, Angular 2.3, PrimeNG 1.1.4

Angular version: 2.0.X
Angular 2.4.1

PrimeNG version: 2.0.X
PrimeNG 1.1.14

Browser:
All

Language:
ES6

[kanakisn]

Hi,

you can try the appendTo attribute of the p-calendar. Try to set it to an element using a local template variable. This worked for us.

[Shifs]

@kanakisn : Thanks a lot . It worked !

[Shifs]

Here is the link for prime ng calendar
http://www.primefaces.org/primeng/#/calendar

[bishu40010961]

can you provide a example. I mean how to use local template variable. I am using primeng 5.x its not working for me. same problem.
<ng-template let-col let-car="rowData" pTemplate="editor" #ref> <p-calendar [(ngModel)]="car[col.field]" [appendTo]="ref" name="test" dateFormat="dd/mm/yy" placeholder="DD/MM/YYYY"> </p-calendar> </ng-template>

I am getting the calendar at the boottom-right corner of data-grid.

[bishu40010961]

same problem, can i get a code snippet. i tried using template ref variable, its positioning calendar overlay to bottom right corner of data-grid.

[ruipimentel]

Code snippet:

<!-- Add a div outside the p-table: -->
<div #calendarWrapper></div>

<p-table
  [value]="cars"
  editMode="row"
  dataKey="identifier"
>
  <!-- ... -->
  <ng-template pTemplate="body" let-car let-editing="editing">
    <!-- ... -->
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <!-- Add [appendTo] to solve the CSS conflict with p-table: -->
            <p-calendar
              [(ngModel)]="car.manufacturingDate"
              [appendTo]="calendarWrapper"
            >
            </p-calendar>
          </ng-template>
          <ng-template pTemplate="output">
            {{car.manufacturingDate}}
          </ng-template>
        </p-cellEditor>
      </td>
    <!-- ... -->
  </ng-template>
</p-table>