p-календарь скрыть под панелью контейнера на bs-modal в angular 7

Question

Я использовал компонент primeNg на bootstrap bs-modal, я использовал полосу прокрутки для нескольких заметок. при нажатии на компонент p-calendar календарь прячется за полосой прокрутки. Как показано на рисунке.

Answer 1

Добавить следующие зависимости

1. HostListener из angular -core
2. import $ из 'jquery';

и запишите следующий код в файл компонента ts.

     @HostListener('document:click', ['$event'])
     openCloseCalendar(ev) {    
       if("P-CALENDAR" == ev.path[2].tagName || ev.path[3].tagName){
          let calElem = ev.path[2] || ev.path[3];
          let target = $(calElem).find(".ui-datepicker")[0];
          let calTop = $($(calElem).find("input")[0]).offset();
          if(calTop && calTop.top){
            $(target).css({"display":"block", "min-width": "200px", "position": "fixed", "top": calTop.top, left: ev.offsetY})
          }   
        }
      }