DatePicker being truncated in dataTable

I have several datePicker in a dataTable , and a vertical scroll on that table.
The issue is that when i open my datepicker, it doesn’t “pop outside” the datatable, but does something like this:

Looking online i found that the solution could be to use the position:relative style on the parent of the datePicker , as stated on the Git page of the datepicker , but it does not seem to work on my case.

Here the directive I use to modify the datepicker :

var parent = $(elem).parent();
parent.css('position', 'relative');
var dtp = parent.datetimepicker({
     format: "DD-MM-YYYY HH:mm:ss",
      showTodayButton: false,
});

Any hint? Did i got something wrong?

EDIT
Here is the HTML of the datatable

<div class="table-responsive" >
            <table id="newFornitures" class="table" datatable="ng" dt-options="dtOptions">
                <thead>
                    <tr>
                        <th class="col-order">START_DATE</th>
                        <th class="col-order">END_DATE</th>
                    </tr>
                </thead>
                <tbody > 
                    <tr ng-repeat="row in insSupplies">
                        <td>
                            <div class="input-group date">
                                <input type="text" class="form-control" value="insSupplies[$index].start_date" ng-model="insSupplies[$index].start_date" dateDirective>
                                <span class="input-group-addon">
                                    <span class="e-ico">today</span>
                                </span>                                     
                            </div>
                        </td>
                        <td>
                            <div class="input-group date">
                                <input type="text" class="form-control" value="insSupplies[$index].start_date"  ng-model="insSupplies[$index].end_date" dateDirective>
                                <span class="input-group-addon">
                                    <span class="e-ico">today</span>
                                </span>                                     
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

and here are the options of the dataTable :

$scope.dtOptions = DTOptionsBuilder.newOptions()
            .withDisplayLength(10)
            .withOption('bFilter', false)
            .withOption('bProcessing', false)
            .withOption('sScrollY', "250px")
            .withOption('sScrollX', false)
            .withLanguage({ "sEmptyTable": "Nessuna fornitura presente","sInfoEmpty" : ""})
            .withOption('bPaginate', false);

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/27/datepicker-being-truncated-in-datatable/
via @lzomedia #developer #freelance #web