CODEWITHSUNDEEP
cssbootstrap-modalag-gridag-grid-angularprimeng-calendar
user630209
user630209

Reputation: 1207

Date picker is hidden in ag-grid-angular, which is loaded in NgbModal

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

Upvotes: 0

Views: 2138

Answers (3)

C&#233;dric S
C&#233;dric S

Reputation: 519

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>

Upvotes: 1

Shuheb
Shuheb

Reputation: 2352

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

Upvotes: 0

philDev
philDev

Reputation: 61

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.

Upvotes: 1

Related Questions