PrimeNG table unable to display calendar properly in column filter

Question

I'm using PrimeNG table with filter date column in my application. If the width of the browser increase, the calendar in the last column may not display properly. It seems something wrong that calendar itself is not aware the space it is not enough to display full calendar. Like below that only 'Sun' to 'Wed' can be chosen. I have no idea to fix it. Anyone can help?

app.component.html

<div class="card">
  <p-table
    [columns]="cols"
    [value]="cars"
    [scrollable]="true"
    scrollHeight="250px"
    [virtualScroll]="true"
    [virtualScrollItemSize]="46">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" style="width: 20%;">
          <p-columnFilter
            [type]="'date'"
            [field]="col.field"
            [showOperator]="false"
            [showMenu]="true"
            display="menu"
            class="ml-auto"
          ></p-columnFilter>
          {{ col.header }}
        </th>
      </tr>
    </ng-template>
    <ng-template
      pTemplate="body"
      let-rowData
      let-rowIndex="rowIndex"
      let-columns="columns">
      <tr style="height:46px">
        <td *ngFor="let col of columns">
          {{ rowData[col.field] }}
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

[Full calendar cannot display if the browser become wider] (https://i.stack.imgur.com/5jiVZ.jpg)

[Sample by opening in new tab to see the problem] (https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-gk5wkx?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts)

Answer 1

same issue I have faced in my project. I fixed this issue by using the below CSS

.p-column-filter-constraint .p-datepicker {
            left: -50px !important;
        }