user more precision when querying DOM dimensions

fullcalendar · Aug 7, 2019 · 9443b99 · 9443b99
1 parent 0605a56
commit 9443b99
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/packages/core/src/CalendarComponent.ts b/packages/core/src/CalendarComponent.ts
@@ -245,10 +245,11 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
     } else if (typeof heightInput === 'function') { // exists and is a function
       this.viewHeight = heightInput() - this.queryToolbarsHeight()
     } else if (heightInput === 'parent') { // set to height of parent element
-      this.viewHeight = (this.el.parentNode as HTMLElement).offsetHeight - this.queryToolbarsHeight()
+      let parentEl = this.el.parentNode as HTMLElement
+      this.viewHeight = parentEl.getBoundingClientRect().height - this.queryToolbarsHeight()
     } else {
       this.viewHeight = Math.round(
-        this.contentEl.offsetWidth /
+        this.contentEl.getBoundingClientRect().width /
         Math.max(calendar.opt('aspectRatio'), .5)
       )
     }
@@ -274,7 +275,7 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
 
   freezeHeight() {
     applyStyle(this.el, {
-      height: this.el.offsetHeight,
+      height: this.el.getBoundingClientRect().height,
       overflow: 'hidden'
     })
   }

diff --git a/packages/core/src/util/dom-geom.ts b/packages/core/src/util/dom-geom.ts
@@ -22,8 +22,11 @@ export function computeEdges(el, getPadding = false): EdgeInfo {
   let borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0
   let borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0
   let borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0
+
+  // must use offset(Width|Height) because compatible with client(Width|Height)
   let scrollbarLeftRight = sanitizeScrollbarWidth(el.offsetWidth - el.clientWidth - borderLeft - borderRight)
   let scrollbarBottom = sanitizeScrollbarWidth(el.offsetHeight - el.clientHeight - borderTop - borderBottom)
+
   let res: EdgeInfo = {
     borderLeft,
     borderRight,

diff --git a/packages/core/src/util/misc.ts b/packages/core/src/util/misc.ts
@@ -125,7 +125,7 @@ export function matchCellWidths(els: HTMLElement[]) {
   els.forEach(function(el) {
     let innerEl = el.firstChild // hopefully an element
     if (innerEl instanceof HTMLElement) {
-      let innerWidth = innerEl.offsetWidth
+      let innerWidth = innerEl.getBoundingClientRect().width
       if (innerWidth > maxInnerWidth) {
         maxInnerWidth = innerWidth
       }
@@ -154,7 +154,9 @@ export function subtractInnerElHeight(outerEl: HTMLElement, innerEl: HTMLElement
   applyStyle(outerEl, reflowStyleProps)
   applyStyle(innerEl, reflowStyleProps)
 
-  let diff = outerEl.offsetHeight - innerEl.offsetHeight // grab the dimensions
+  let diff = // grab the dimensions
+    outerEl.getBoundingClientRect().height -
+    innerEl.getBoundingClientRect().height
 
   // undo hack
   let resetStyleProps = { position: '', left: '' }

diff --git a/packages/timegrid/src/AbstractTimeGridView.ts b/packages/timegrid/src/AbstractTimeGridView.ts
@@ -77,7 +77,8 @@ export default abstract class TimeGridView extends View {
       )
 
       // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
-      this.dayGrid.bottomCoordPadding = (this.el.querySelector('.fc-divider') as HTMLElement).offsetHeight
+      let dividerEl = this.el.querySelector('.fc-divider') as HTMLElement
+      this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height
     }
   }
 

diff --git a/packages/timegrid/src/TimeGrid.ts b/packages/timegrid/src/TimeGrid.ts
@@ -563,7 +563,7 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
 
 
   getTotalSlatHeight() {
-    return this.slatContainerEl.offsetHeight
+    return this.slatContainerEl.getBoundingClientRect().height
   }