fix(ui): range-type and DateTime have issue recalculating body height

Author: hawkeye64

ui/src/component/QDateRangeScroller.js

@@ -275,7 +275,8 @@ export default {
           noMonths: this.startNoMonths,
           noYears: this.startNoYears,
           yearBegin: this.startYearBegin,
-          yearStop: this.startYearStop
+          yearStop: this.startYearStop,
+          childHeight: this.bodyHeight
         },
         class: {
           'q-scroller__vertical-bar': this.verticalBar === true
@@ -319,7 +320,8 @@ export default {
           noMonths: this.endNoMonths,
           noYears: this.endNoYears,
           yearBegin: this.endYearBegin,
-          yearStop: this.endYearStop
+          yearStop: this.endYearStop,
+          childHeight: this.bodyHeight
         },
         on: {
           input: v => { this.endDate = v }

ui/src/component/QDateTimeScroller.js

@@ -221,7 +221,8 @@ export default {
           showWeekdayLabel: this.showWeekdayLabel,
           noDays: this.noDays,
           noMonths: this.noMonths,
-          noYears: this.noYears
+          noYears: this.noYears,
+          childHeight: this.bodyHeight
         },
         class: {
           'q-scroller__vertical-bar': this.verticalBar === true
@@ -258,7 +259,8 @@ export default {
           disabledHours: this.disabledHours,
           disabledMinutes: this.disabledMinutes,
           noMinutes: this.noMinutes,
-          noHours: this.noHours
+          noHours: this.noHours,
+          childHeight: this.bodyHeight
         },
         on: {
           input: v => { this.time = v }

ui/src/component/QTimeRangeScroller.js

@@ -264,7 +264,8 @@ export default {
           disabledHours: this.startDisabledHours,
           disabledMinutes: this.startDisabledMinutes,
           noMinutes: this.startNoMinutes,
-          noHours: this.startNoHours
+          noHours: this.startNoHours,
+          childHeight: this.bodyHeight
         },
         class: {
           'q-scroller__vertical-bar': this.verticalBar === true
@@ -302,7 +303,8 @@ export default {
           disabledHours: this.endDisabledHours,
           disabledMinutes: this.endDisabledMinutes,
           noMinutes: this.endNoMinutes,
-          noHours: this.endNoHours
+          noHours: this.endNoHours,
+          childHeight: this.bodyHeight
         },
         on: {
           input: v => { this.endTime = v }

ui/src/component/mixins/common.js

@@ -9,6 +9,7 @@ export default {
       let style = {}
       style['--scroller-border-color'] = this.calculateColor(this.borderColor)
       style['--scroller-bar-color'] = this.calculateColor(this.barColor)
+      style.height = this.bodyHeight
       return style
     }
   },
@@ -44,12 +45,16 @@ export default {
       let self = this
       // this.$nextTick(() => {
       setTimeout(() => {
-        self.headerHeight = self.noHeader === true ? 0 : self.dense === true ? 25 : 50
-        self.footerHeight = self.noFooter === true ? 0 : self.dense === true ? 25 : 50
-        self.height = self.$el.getBoundingClientRect().height
-        self.bodyHeight = self.height - self.headerHeight - self.footerHeight
-        if (self.noHeader !== true && self.noFooter !== true && self.noBorder !== true) {
-          self.bodyHeight -= 2
+        if (this.childHeight === void 0) {
+          self.headerHeight = self.noHeader === true ? 0 : self.dense === true ? 25 : 50
+          self.footerHeight = self.noFooter === true ? 0 : self.dense === true ? 25 : 50
+          self.height = self.$el.getBoundingClientRect().height
+          self.bodyHeight = self.height - self.headerHeight - self.footerHeight
+          if (self.noHeader !== true && self.noFooter !== true && self.noBorder !== true) {
+            self.bodyHeight -= 2
+          }
+        } else {
+          self.bodyHeight = this.childHeight
         }
       }, 200)
     },
@@ -65,7 +70,7 @@ export default {
           'q-scroller__overflow-hidden': this.$q.platform.is.mobile !== true
         },
         style: {
-          height: this.bodyHeight + 'px'
+          height: (this.childHeight === void 0 ? this.bodyHeight : this.childHeight) + 'px'
         }
       }), [
         this.__renderScrollers(h)

ui/src/component/utils/props.js

@@ -27,7 +27,8 @@ export default {
     disabledTextColor: {
       type: String,
       default: 'grey-7'
-    }
+    },
+    childHeight: [Number, String]
   },
   base: {
     value: null, // [Number, String, Object, Array, Date, Function],