0

On button click an NgbModal modal box will be loaded. The modal is having an ag-grid-angular component.

This grid have a date picker column. I am using primeng date picker. HTML code for calendar display.

   <p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>

The problem here is that the date picker calendar is always hidden inside the grid. like this. How can I solve this.

enter image description here

user630209
  • 1,123
  • 4
  • 42
  • 93

3 Answers3

1

This can be solved, by looking at the CSS property overflow of the CSS class .ag-root-wrapper.

This class is declared on the <ag-grid-angular> directive (see screenshot). enter image description here

The solution for me was to include an overwrite of the overflow property in the css of the component that includes the <ag-grid-angular> directive. (The component where I include ag-grid on my html).

// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
  overflow: visible;
}

The following Stack Overflow Post helped me to identify the solution.

philDev
  • 51
  • 1
  • 1
  • 8
1

Add appendTo="body" like this:

<p-calendar appendTo="body" class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
        yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
    </p-calendar>
Cédric S
  • 479
  • 3
  • 10
0

The issue here is that the calendar popup is being clipped by the container. This is a common issue when using date pickers.

To solve this you need to set the popup element to the document body, the simplest solution for you would be to add [appendTo]="'body'" to your calendar component, this is a property which exists on the API of the primeng-calendar.

See this blog for more details on the implementation, as it has an example using primeng and ag-grid with angular: https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body

Shuheb
  • 2,012
  • 1
  • 4
  • 6