Fix the positioning if the timepicker is viewport is changed.

Author: KAYLukas

jquery.timepicker.js

@@ -211,6 +211,7 @@
                     last: function() { return widget.last(i) ;},
                     selected: function() { return widget.selected(i) ;},
                     open: function() { return widget.open(i) ;},
+                    reposition: function () { return widget.reposition(i); },
                     close: function() { return widget.close(i) ;},
                     closed: function() { return widget.closed(i) ;},
                     destroy: function() { return widget.destroy(i) ;},
@@ -397,6 +398,11 @@
                         i.element.data('timepicker-user-clicked-outside', true).blur();
                     }
                 });
+                // make sure we reposition the timepicker when the viewport changes
+                $(window).bind('resize.timepicker-' + i.element.data('timepicker-event-namespace'), i.reposition);
+                // use vanilla javascript to be able to use event capturing instead of bubbling: otherwise we have to listen
+                // on all parent containers.
+                window.addEventListener('scroll', i.reposition, true);
 
                 // if a date is already selected and options.dynamic is true,
                 // arrange the items in the list so the first item is
@@ -517,6 +523,46 @@
                 return i.element;
             },
 
+            reposition: function (i) {
+                var widget = this;
+                var containerDecorationHeight = widget.container.outerHeight() - widget.container.height(),
+                    zindex = i.options.zindex ? i.options.zindex : i.element.offsetParent().css( 'z-index' ),
+                    elementOffset = i.element.offset();
+
+                // position the container right below the element, or as close to as possible.
+                widget.container.css( {
+                    top: elementOffset.top + i.element.outerHeight(),
+                    left: elementOffset.left
+                } );
+
+                // then show the container so that the browser can consider the timepicker's
+                // height to calculate the page's total height and decide if adding scrollbars
+                // is necessary.
+                widget.container.show();
+
+                // now we need to calculate the element offset and position the container again.
+                // If the browser added scrollbars, the container's original position is not aligned
+                // with the element's final position. This step fixes that problem.
+                widget.container.css( {
+                    left: i.element.offset().left,
+                    height: widget.ui.outerHeight() + containerDecorationHeight,
+                    width: i.element.outerWidth(),
+                    zIndex: zindex,
+                    cursor: 'default'
+                } );
+
+
+                var calculatedWidth = widget.container.width() - ( widget.ui.outerWidth() - widget.ui.width() );
+
+                // hardcode ui, viewport and item's width. I couldn't get it to work using CSS only
+                widget.ui.css( { width: calculatedWidth } );
+                widget.viewport.css( { width: calculatedWidth } );
+                i.items.css( { width: calculatedWidth } );
+
+
+                return i.element;
+            },
+
             close: function(i) {
                 var widget = this;
 
@@ -530,6 +576,9 @@
                     'keydown.timepicker-' + i.element.data('timepicker-event-namespace') + ' ' +
                     'keyup.timepicker-' + i.element.data('timepicker-event-namespace'));
 
+                $(window).unbind('resize.timepicker-' + i.element.data('timepicker-event-namespace'));
+                window.removeEventListener('scroll', i.reposition, true);
+
                 return i.element;
             },
 
@@ -669,6 +718,7 @@
                 'next',
                 'previous',
                 'open',
+                'reposition',
                 'close',
                 'destroy',
                 'setTime'