p-calendar hide under container panel on bs-modal in angular 7

user_5629298 0
Viewed 805

I have used primeNg component on bootstrap's bs-modal,i used scrollbar for multiple notes. when click on p-calendar component, calendar is hiding behind scroll bar. As per showing in image.

enter image description here

angular7 bootstrap-modal primeng
2 Answers

Add following dependacnies

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

and write following code to your ts component file.

     @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})
          }   
        }
      }
user_56292980

Try adding [appendTo]: 'body' in your p-calendar.

user_112412460
Related