Opens in the wrong position

The input is below the date picker while the arrow is pointing the wrong direction and the date picker seems to be a bit off.

My html:

<input
  class="input-box form-control" 
  placeholder="Select a date" 
  angular-mydatepicker
  name="mydate" 
  (click)="dp.toggleCalendar()" 
  [(ngModel)]="selectedDate" 
  [options]="myDpOptions"
  #dp="angular-mydatepicker"
/>

My typescript:

  // ...
  myDpOptions: IAngularMyDpOptions = {
    minYear: 1960,
    maxYear: 2150,
    dateRange: false,
    dateFormat: 'dd-mm-yyyy',
  };
  myDateInit: boolean = true;
  selectedDate: IMyDateModel = null;
  // ...

Notes:

I'm using boostrap for styling, with some color modifications
The element is inside of a <app-form-group> that is inside of a <form>
if i change the position of the <lib-angular-mydatepicker-calendar> to relative it moves the date picker below my input box but it still it to far a away from the input box, around 45px below the place it is supposed to be.

kekeh / angular-mydatepicker

Opens in the wrong position #16