I am trying to use mydaterangepicker(https://kekeh.github.io/mydaterangepicker/) into primeng turbotable (primeng calendar does not comply with the requirements), but it doesn't display well. can you help with some css code or another solution please

I provide my source code, thank you: https://stackblitz.com/edit/angular-fv53c6

2 Answers

Akber Iqbal On Best Solutions

To fix the display of the calendar, instead of hiding inside the cell, putting it out in the open, put this in your app.component.css:

::ng-deep .mydrp { position:absolute !important;  }
::ng-deep .selectorarrow { position:absolute !important; }
::ng-deep .mydrp .selectiongroup {     margin-left: 12px;    top: -18px;     display: inline-table  !important;     border: 1px solid #CCC !important; }
::ng-deep .mydrp { border:none !important; }
::ng-deep body .ui-table .ui-table-thead > tr > th { height:45px !important; }

or check the working demo which is forked against your stackblitz

Trevin Avery On

Your date picker is hidden because its parent's overflow is hidden.

You need to add overflow:visible to the parent of your my-date-range-picker and the div with class="ui-table-scrollable-header ui-widget-header".