Merge pull request 1stQuad#2 from daviidovich/master

Change widget positioning calculation;

Author: illusdolphin

css/bootstrap-datetimepicker.css

@@ -284,20 +284,12 @@
 .bootstrap-datetimepicker-widget .btn-today{
   padding: 3px 0;
 }
-.bootstrap-datetimepicker-widget.bottom {
-  top: 100%;
-  bottom: unset;
-}
 
 .bootstrap-datetimepicker-widget.bottom.dropdown-menu {
   margin-top: 6px;
 }
 
-.bootstrap-datetimepicker-widget.top {
-  top: unset;
-  bottom: 100%;
-}
-
 .bootstrap-datetimepicker-widget.top.dropdown-menu {
   margin-bottom: 6px;
+  margin-top: 0;
 }

lib/DateTimeField.js

@@ -358,7 +358,7 @@ var DateTimeField = (function (_Component) {
             var classes = {};
             var styles = {
                 display: 'block',
-                position: 'absolute'
+                position: 'fixed'
             };
 
             if (options) {
@@ -368,11 +368,15 @@ var DateTimeField = (function (_Component) {
                 classes['time'] = options.timeDisplayed;
             }
 
-            var wrapRect = _this.wrapper.getBoundingClientRect();
-            var widgetRect = _this.widget.getBoundingClientRect();
-            var widgetHeight = widgetRect.height;
-            var fitTop = wrapRect.top - widgetHeight >= 0;
-            var fitBottom = document.documentElement.clientHeight > wrapRect.bottom + widgetHeight;
+            if (!_this.wrapperRef.current || !_this.widgetRef.current) {
+                return;
+            }
+            var fieldRect = _this.wrapperRef.current.getBoundingClientRect();
+            var widgetRect = _this.widgetRef.current.getBoundingClientRect();
+            var arrowIndent = 6;
+            var widgetHeight = widgetRect.height + arrowIndent;
+            var fitTop = fieldRect.top - widgetHeight > 0;
+            var fitBottom = fieldRect.bottom + widgetHeight < document.documentElement.clientHeight;
 
             var placement = _this.props.direction === 'up' || _this.props.direction === 'auto' ? 'top' : 'bottom';
             var top = placement === 'top' && fitTop || placement === 'bottom' && !fitBottom;
@@ -381,10 +385,14 @@ var DateTimeField = (function (_Component) {
             if (top) {
                 classes.top = true;
                 classes.bottom = false;
+                styles.top = fieldRect.top - widgetHeight + 'px';
+                styles.left = fieldRect.left + 'px';
             }
             if (bottom) {
                 classes.top = false;
                 classes.bottom = true;
+                styles.top = fieldRect.bottom + 'px';
+                styles.left = fieldRect.left + 'px';
             }
 
             return _this.setState({
@@ -460,6 +468,8 @@ var DateTimeField = (function (_Component) {
             dateTime = _moment2['default'].utc(props.dateTime);
         }
 
+        this.wrapperRef = _react2['default'].createRef();
+        this.widgetRef = _react2['default'].createRef();
         this.state = {
             showDatePicker: props.mode !== _ConstantsJs2['default'].MODE_TIME && props.viewMode !== _ConstantsJs2['default'].MODE_TIME,
             showTimePicker: props.mode === _ConstantsJs2['default'].MODE_TIME || props.viewMode === _ConstantsJs2['default'].MODE_TIME,
@@ -533,10 +543,7 @@ var DateTimeField = (function (_Component) {
             }
             return _react2['default'].createElement(
                 'div',
-                { className: pickerClass,
-                    ref: function (el) {
-                        _this2.wrapper = el;
-                    } },
+                { ref: this.wrapperRef, className: pickerClass },
                 this.renderOverlay(),
                 _react2['default'].createElement(_DateTimePickerJs2['default'], {
                     addDecade: this.addDecade,
@@ -549,9 +556,7 @@ var DateTimeField = (function (_Component) {
                     minDate: this.props.minDate,
                     mode: this.props.mode,
                     unlimited: this.props.unlimited,
-                    widgetRef: function (el) {
-                        return _this2.widget = el;
-                    },
+                    widgetRef: this.widgetRef,
                     selectedDate: this.state.selectedDate,
                     setSelectedMonth: this.setSelectedMonth,
                     setSelectedDate: this.setSelectedDate,

lib/DateTimePicker.js

@@ -203,7 +203,7 @@ var DateTimePicker = (function (_Component) {
             widgetClasses: _propTypes2['default'].object,
             widgetStyle: _propTypes2['default'].object,
             togglePicker: _propTypes2['default'].func,
-            widgetRef: _propTypes2['default'].func,
+            widgetRef: _propTypes2['default'].object,
             setSelectedHour: _propTypes2['default'].func,
             setSelectedMinute: _propTypes2['default'].func,
             setToday: _propTypes2['default'].func,