Using datepicker with append to body causes position issue when changing screen size

[deeg]

Go to this plunker and open the datepicker for the one on the right. (They should be side by side)

While the datepicker is open, make the screen smaller. Notice the input moves but the datepicker stays in the same place and is no longer aligned with the input.

I'm not sure if this will be fixed as part of #4762.

There is another issue with append-to-body (#5058), both might be able to be fixed at once.

[jonkri]

Sorry if I'm posing something irrelevant here, but I'm also noticing that the button that toggles the datepicker does not always have the same height as the input field next to it.

Adding the form-control class to the button did fix this issue in at least one situation, but made the button too narrow instead.

In Firefox the height seems to be correct with the default zoom, but breaks sometimes when zooming. In Safari, it looks broken out of the box.

[jonkri]

Actually, the height problem seems to only occur upon zoom on Safari as well - sorry about that!

[wesleycho]

With the datepicker supporting positioning, some simple logic around debouncing a resize event callback that repositions the popup should suffice.