title: Angular Scheduler quick info template moves above calendar frame
body: <p>I was testing calendar that I made with Angular Scheduler library and found out that quick info template are appearing above calendar's frame. I need to improve that bug. How can I do this?</p>
  <p>P.S. - It's a new feature in Angular Scheduler with these quick info templates.</p>
  <p>html file</p>
  <pre><code>&lt;div *ngIf=&quot;accessChecker.isGranted('view', 'scheduler') | async&quot; class=&quot;&quot;&gt;
    &lt;div class=&quot;control-section&quot;&gt;
      &lt;ejs-schedule #scheduleObj width='100%' height='600px' [selectedDate]=&quot;selectedDate&quot; [readonly]=true
                    [showHeaderBar]=&quot;false&quot; [eventSettings]=&quot;eventSettings&quot; [firstDayOfWeek]=&quot;1&quot;&gt;
        &lt;e-resources&gt;
          &lt;e-resource field='RoomId' title='Room Type' name='MeetingRoom' textField='Name' idField='Id'
                      colorField='Color' [dataSource]='roomData'&gt;
          &lt;/e-resource&gt;
        &lt;/e-resources&gt;
        &lt;!-- Header template --&gt;
  
        &lt;ng-template style=&quot;position: relative;&quot; #quickInfoTemplatesHeader let-data&gt;
          &lt;div class=&quot;quick-info-header-content&quot; [ngStyle]=&quot;getHeaderStyles(data)&quot;&gt;
            &lt;div&gt;&lt;p style=&quot;font-size: 20px; margin:15px&quot;&gt;Treeningute info&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;!-- Content Template --&gt;
        &lt;ng-template style=&quot;position: relative;&quot; #quickInfoTemplatesContent let-data&gt;
          &lt;ng-container [ngTemplateOutlet]=&quot;data.elementType == 'cell' ? cellContent : eventContent&quot;
                        [ngTemplateOutletContext]=&quot;{data:data}&quot;&gt;&lt;/ng-container&gt;
        &lt;/ng-template&gt;
        &lt;ng-template style=&quot;position: relative;&quot; #cellContent let-data=&quot;data&quot;&gt;
          &lt;div class=&quot;quick-info-content&quot;&gt;
            &lt;div class=&quot;e-cell-content&quot;&gt;
              &lt;div class=&quot;content-area&quot;&gt;
                &lt;ejs-textbox #titleObj id=&quot;title&quot; placeholder=&quot;Title&quot;&gt;&lt;/ejs-textbox&gt;
              &lt;/div&gt;
              &lt;div class=&quot;content-area&quot;&gt;
                &lt;ejs-dropdownlist id='eventType' #eventTypeObj [dataSource]='roomData' [fields]='roomFields'
                                  placeholder='Choose Type' index=&quot;{{0}}&quot; popupHeight=&quot;200px&quot;&gt;&lt;/ejs-dropdownlist&gt;
              &lt;/div&gt;
              &lt;div class=&quot;content-area&quot;&gt;
                &lt;ejs-textbox #notesObj id=&quot;notes&quot; placeholder=&quot;Notes&quot;&gt;&lt;/ejs-textbox&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template style=&quot;position: relative;&quot; #eventContent let-data=&quot;data&quot;&gt;
          &lt;div class=&quot;quick-info-content&quot;&gt;
            &lt;div class=&quot;event-content&quot;&gt;
              &lt;div class=&quot;meeting-type-wrap&quot;&gt;
                &lt;label&gt;Pealkiri&lt;/label&gt;:
                &lt;span&gt;{{data.Subject}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class=&quot;meeting-subject-wrap&quot;&gt;
                &lt;label&gt;Koht&lt;/label&gt;:
                &lt;span&gt;{{getEventType(data)}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class=&quot;notes-wrap&quot;&gt;
                &lt;label&gt;Treenigute aeg&lt;/label&gt;:
                &lt;span&gt;{{data.Description}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class=&quot;notes-wrap&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                  &lt;label&gt;Treeningu &lt;/label&gt;:
                &lt;/div&gt;
                &lt;div class=&quot;row&quot;&gt;
                  &lt;input type=&quot;text&quot; placeholder=&quot;Aktiveerida koodi&quot;&gt;
                  &lt;input type=&quot;checkbox&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;!-- Footer Template --&gt;
        &lt;ng-template style=&quot;position: relative;&quot; #quickInfoTemplatesFooter let-data&gt;
          &lt;ng-container [ngTemplateOutlet]=&quot;data.elementType == 'cell' ? cellFooter : eventFooter&quot;
                        [ngTemplateOutletContext]=&quot;{data:data}&quot;&gt;&lt;/ng-container&gt;
        &lt;/ng-template&gt;
        &lt;ng-template #cellFooter let-data=&quot;data&quot;&gt;
          &lt;div class=&quot;e-cell-footer&quot;&gt;
            &lt;button ejs-button id=&quot;more-details&quot; cssClass=&quot;e-flat&quot; (click)=&quot;buttonClickActions($event)&quot;&gt;More
              Details
            &lt;/button&gt;
            &lt;button ejs-button id=&quot;add&quot; cssClass=&quot;e-flat&quot; [isPrimary]=&quot;true&quot;
                    (click)=&quot;buttonClickActions($event)&quot;&gt;Add
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template style=&quot;position: relative;&quot; #eventFooter let-data=&quot;data&quot;&gt;
          &lt;div class=&quot;e-event-footer&quot;&gt;
            &lt;button ejs-button id=&quot;more-details&quot; cssClass=&quot;e-flat&quot; (click)=&quot;buttonClickActions($event)&quot;&gt;Peatu treeningut
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;e-views&gt;
          &lt;e-view option=&quot;Month&quot;&gt;&lt;/e-view&gt;
        &lt;/e-views&gt;
      &lt;/ejs-schedule&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>component file</p>
  <pre><code>import {Component, ViewChild, ViewEncapsulation, Inject} from '@angular/core';
  import {extend, Internationalization} from '@syncfusion/ej2-base';
  import {DropDownListComponent} from '@syncfusion/ej2-angular-dropdowns';
  import {TextBoxComponent} from '@syncfusion/ej2-angular-inputs';
  import {
    ScheduleComponent, MonthService, DayService, WeekService, WorkWeekService, AgendaService,
    MonthAgendaService, ResourcesModel, CellClickEventArgs, CurrentAction, EventSettingsModel
  } from '@syncfusion/ej2-angular-schedule';
  import {quickInfoTemplateData} from './data';
  import {NbAccessChecker} from '@nebular/security';
  
  @Component({
    selector: 'ngx-scheduler',
    templateUrl: 'scheduler.component.html',
    styleUrls: ['scheduler.component.scss'],
    providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService],
    encapsulation: ViewEncapsulation.None,
  })
  export class SchedulerComponent {
    @ViewChild('scheduleObj')
    public scheduleObj: ScheduleComponent;
    @ViewChild('eventTypeObj')
    public eventTypeObj: DropDownListComponent;
    @ViewChild('titleObj')
    public titleObj: TextBoxComponent;
    @ViewChild('notesObj')
    public notesObj: TextBoxComponent;
    public eventSettings: EventSettingsModel = {dataSource: &lt;Object[]&gt;extend([], quickInfoTemplateData, null, true)};
    public selectedDate: Date = new Date(2020, 0, 9);
    public intl: Internationalization = new Internationalization();
    public roomFields: Object = {text: 'Name', value: 'Id'};
    public roomData: Object[] = [
      {Name: 'Jammy', Id: 1, Capacity: 20, Color: '#ea7a57', Type: 'Conference'},
      {Name: 'Tweety', Id: 2, Capacity: 7, Color: '#7fa900', Type: 'Cabin'},
      {Name: 'Nestle', Id: 3, Capacity: 5, Color: '#5978ee', Type: 'Cabin'},
      {Name: 'Phoenix', Id: 4, Capacity: 15, Color: '#fec200', Type: 'Conference'},
      {Name: 'Mission', Id: 5, Capacity: 25, Color: '#df5286', Type: 'Conference'},
      {Name: 'Hangout', Id: 6, Capacity: 10, Color: '#00bdae', Type: 'Cabin'},
      {Name: 'zalypa', Id: 7, Capacity: 20, Color: '#865fcf', Type: 'Conference'},
      {Name: 'Rainbow', Id: 8, Capacity: 8, Color: '#1aaa55', Type: 'Cabin'},
      {Name: 'Swarm', Id: 9, Capacity: 30, Color: '#df5286', Type: 'Conference'},
      {Name: 'Photogenic', Id: 10, Capacity: 25, Color: '#710193', Type: 'Conference'}
    ];
  
    constructor(public accessChecker: NbAccessChecker) {
  
    }
  
    public getResourceData(data: { [key: string]: Object }): { [key: string]: Object } {
      // tslint:disable-next-line: deprecation
      const resources: ResourcesModel = this.scheduleObj.getResourceCollections()[0];
      const resourceData: { [key: string]: Object } = (resources.dataSource as Object[]).filter((resource: { [key: string]: Object }) =&gt;
        resource.Id === data.RoomId)[0] as { [key: string]: Object };
      return resourceData;
    }
  
  
    public getHeaderStyles(data: { [key: string]: Object }): Object {
      if (data.elementType === 'cell') {
        return {'align-items': 'center', 'color': '#919191'};
      } else {
        const resourceData: { [key: string]: Object } = this.getResourceData(data);
        return {'background': resourceData.Color, 'color': '#FFFFFF'};
      }
    }
  
    public getHeaderTitle(data: { [key: string]: Object }): string {
      return (data.elementType === 'cell') ? 'Add Appointment' : 'Appointment Details';
    }
  
    public getHeaderDetails(data: { [key: string]: Date }): string {
      return this.intl.formatDate(data.StartTime, {type: 'date', skeleton: 'full'}) + ' (' +
        this.intl.formatDate(data.StartTime, {skeleton: 'hm'}) + ' - ' +
        this.intl.formatDate(data.EndTime, {skeleton: 'hm'}) + ')';
  
    }
  
    public getEventType(data: { [key: string]: string }): string {
      const resourceData: { [key: string]: Object } = this.getResourceData(data);
      return resourceData.Name as string;
    }
  
    public buttonClickActions(e: Event) {
      const quickPopup: HTMLElement = this.scheduleObj.element.querySelector('.e-quick-popup-wrapper') as HTMLElement;
      const getSlotData: Function = (): { [key: string]: Object } =&gt; {
        const cellDetails: CellClickEventArgs = this.scheduleObj.getCellDetails(this.scheduleObj.getSelectedElements());
        const addObj: { [key: string]: Object } = {};
        addObj.Id = this.scheduleObj.getEventMaxID();
        addObj.Subject = this.titleObj.value;
        addObj.StartTime = new Date(+cellDetails.startTime);
        addObj.EndTime = new Date(+cellDetails.endTime);
        addObj.Description = this.notesObj.value;
        addObj.RoomId = this.eventTypeObj.value;
        return addObj;
      };
      if ((e.target as HTMLElement).id === 'add') {
        const addObj: { [key: string]: Object } = getSlotData();
        this.scheduleObj.addEvent(addObj);
      } else if ((e.target as HTMLElement).id === 'delete') {
        const eventDetails: { [key: string]: Object } = this.scheduleObj.activeEventData.event as { [key: string]: Object };
        let currentAction: CurrentAction;
        if (eventDetails.RecurrenceRule) {
          currentAction = 'DeleteOccurrence';
        }
        this.scheduleObj.deleteEvent(eventDetails, currentAction);
      } else {
        const isCellPopup: boolean = quickPopup.firstElementChild.classList.contains('e-cell-popup');
        const eventDetails: { [key: string]: Object } = isCellPopup ? getSlotData() :
          this.scheduleObj.activeEventData.event as { [key: string]: Object };
        let currentAction: CurrentAction = isCellPopup ? 'Add' : 'Save';
        if (eventDetails.RecurrenceRule) {
          currentAction = 'EditOccurrence';
        }
        this.scheduleObj.openEditor(eventDetails, currentAction, true);
      }
      this.scheduleObj.closeQuickInfoPopup();
    }
  }
  </code></pre>
  <p>module file</p>
  <pre><code>import {NgModule} from '@angular/core';
  import {FullCalendarModule} from '@fullcalendar/angular';
  import {SchedulerComponent} from './scheduler.component';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  import {CommonModule} from '@angular/common';
  import {NbButtonModule, NbCardModule, NbInputModule} from '@nebular/theme';
  import {ContextMenuAllModule, ToolbarAllModule, TreeViewModule} from '@syncfusion/ej2-angular-navigations';
  import {ScheduleAllModule, RecurrenceEditorAllModule} from '@syncfusion/ej2-angular-schedule';
  import {ButtonAllModule, CheckBoxAllModule} from '@syncfusion/ej2-angular-buttons';
  import {
    MaskedTextBoxModule,
    NumericTextBoxAllModule,
    TextBoxAllModule,
    UploaderAllModule
  } from '@syncfusion/ej2-angular-inputs';
  import {DropDownListAllModule, MultiSelectAllModule} from &quot;@syncfusion/ej2-angular-dropdowns&quot;;
  import {DatePickerAllModule, DateTimePickerAllModule, TimePickerAllModule} from &quot;@syncfusion/ej2-angular-calendars&quot;;
  
  FullCalendarModule.registerPlugins([
    dayGridPlugin,
    timeGridPlugin,
    listPlugin,
    interactionPlugin,
  ]);
  
  @NgModule({
    declarations: [
      SchedulerComponent,
    ],
    imports: [
      CommonModule, ScheduleAllModule, RecurrenceEditorAllModule,
      NumericTextBoxAllModule, TextBoxAllModule, DatePickerAllModule,
      TimePickerAllModule, DateTimePickerAllModule, CheckBoxAllModule,
      ToolbarAllModule, DropDownListAllModule, ContextMenuAllModule,
      MaskedTextBoxModule, UploaderAllModule, MultiSelectAllModule, TreeViewModule, ButtonAllModule
    ],
    providers: [],
    bootstrap: [SchedulerComponent],
  })
  export class SchedulerModule {
  }
  </code></pre>
  <p>calendar picture without bug</p>
  <p><a href="https://i.stack.imgur.com/T3gcF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T3gcF.png" alt="enter image description here" /></a></p>
  <p>calendar picture with bug</p>
  <p><a href="https://i.stack.imgur.com/LeiCK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LeiCK.png" alt="enter image description here" /></a></p>