I'm using bootstrap 4 (final) with the [boostrap-datepicker-plugin 1.7.1](http://bootstrap-datepicker.readthedocs.io/en/latest/)   

Since Bootstrap 4 no longer uses .input-group-addon elements (for calendar icon) but .input-group-prepend and .input-group-append I modified the plugin code in this way

```
//this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;

this.component = this.element.hasClass('date') ? this.element.find('.input-group-prepend, .input-group-append, .btn') : false;

```

In this way the plugin seems to work well with the new input-group elements, but unfortunately if I add css margin to the container that contains the input of the datepicker, the dropdown-menu is shown in the wrong position.

[Jsfiddle](https://jsfiddle.net/dex01/phh6uxy7/5/)

I tried to find the solution to this problem, but without success.
Someone can help me to fix this problem?

Thank you