Выбор даты скрыт в ag-grid- angular, который загружается в NgbModal.

Question

При нажатии кнопки будет загружено модальное окно NgbModal. Модальное окно имеет компонент ag-grid- angular.

В этой сетке есть столбец выбора даты. Я использую средство выбора даты Primeng. HTML код для отображения календаря.

   <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> 

Проблема здесь в том, что календарь выбора даты всегда скрыт внутри сетки. как это. Как я могу это решить.

введите описание изображения здесь

Answer 1

Это можно решить, просмотрев свойство CSS overflow класса CSS .ag-root-wrapper.

Этот класс объявлен в директиве <ag-grid-angular> (см. Снимок экрана).

The solution for me was to include an overwrite of the overflow property in the css of the component that includes the 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;
}

Следующее сообщение о переполнении стека помогло мне найти решение.