fix height syncing / width shrinking

packages/core/src/main.ts

@@ -28,7 +28,8 @@ export {
   preventSelection, allowSelection, preventContextMenu, allowContextMenu,
   compareNumbers, enableCursor, disableCursor,
   diffDates,
-  guid
+  guid,
+  computeSmallestCellWidth
 } from './util/misc'
 
 export {

packages/core/src/scrollgrid/util.tsx

@@ -1,6 +1,7 @@
 import { VNode, h, Ref } from '../vdom'
 import { findElements } from '../util/dom-manip'
 import ComponentContext from '../component/ComponentContext'
+import { computeSmallestCellWidth } from '../util/misc'
 
 
 export type CssDimValue = string | number
@@ -42,13 +43,14 @@ export interface ChunkContentCallbackArgs {
 
 
 export function computeShrinkWidth(chunkEls: HTMLElement[]) { // all in same COL!
-  let shrinkEls = findElements(chunkEls, '.shrink')
+  let shrinkCells = findElements(chunkEls, '.shrink')
   let largestWidth = 0
 
-  for (let shrinkEl of shrinkEls) {
-    let cellWidth = shrinkEl.getBoundingClientRect().width + 1 // HACK for simulating a border
-
-    largestWidth = Math.max(largestWidth, cellWidth)
+  for (let shrinkCell of shrinkCells) {
+    largestWidth = Math.max(
+      largestWidth,
+      computeSmallestCellWidth(shrinkCell)
+    )
   }
 
   return largestWidth

packages/core/src/styles/_scrollgrid.scss

@@ -17,11 +17,6 @@
 
   > td {
     height: 0; // needs a height so vgrow's within grow
-  }
-}
-
-.fc .scrollgrid__section { // more precedence to overcome theme
-  th, td {
     padding: 0 !important;
   }
 }
@@ -43,18 +38,6 @@
   position: relative; // for abs-positioned elements within
 }
 
-.shrink {
-  white-space: nowrap;
-}
-
-.fc-ltr .shrink {
-  float: left;
-}
-
-.fc-rtl .shrink {
-  float: right;
-}
-
 
 .scrollgrid.scrollgrid--forprint { // will eventually have precedence of `.fc-print .scrollgrid`
   table-layout: auto;

packages/core/src/util/misc.ts

@@ -305,3 +305,22 @@ export function diffDates(date0: DateMarker, date1: DateMarker, dateEnv: DateEnv
     return diffDayAndTime(date0, date1) // returns a duration
   }
 }
+
+
+/* FC-specific DOM dimension stuff
+----------------------------------------------------------------------------------------------------------------------*/
+
+export function computeSmallestCellWidth(cellEl: HTMLElement) {
+  let allWidthEl = cellEl.querySelector('[data-fc-width-all]')
+  let contentWidthEl = cellEl.querySelector('[data-fc-width-content]')
+
+  if (!allWidthEl) {
+    throw new Error('needs data-fc-width-all') // TODO: use const
+  }
+  if (!contentWidthEl) {
+    throw new Error('needs data-fc-width-content')
+  }
+
+  return cellEl.getBoundingClientRect().width - allWidthEl.getBoundingClientRect().width + // the cell padding+border
+    contentWidthEl.getBoundingClientRect().width
+}

packages/daygrid/src/TableView.tsx

@@ -103,10 +103,12 @@ export default abstract class TableView<State={}> extends View<State> {
 
     if (this.colWeekNumbersVisible) {
       return [
-        <th class={'fc-week-number ' + theme.getClass('tableCellHeader')}>
-          <span class='shrink'>
-            {options.weekLabel}
-          </span>
+        <th class={'shrink fc-week-number ' + theme.getClass('tableCellHeader')}>
+          <div data-fc-width-all={1}>
+            <span data-fc-width-content={1}>
+              {options.weekLabel}
+            </span>
+          </div>
         </th>
       ]
     }
@@ -127,12 +129,16 @@ export default abstract class TableView<State={}> extends View<State> {
 
     if (this.colWeekNumbersVisible) {
       return [
-        <td class='fc-week-number'>
-          <GotoAnchor
-            navLinks={options.navLinks}
-            gotoOptions={{ date: weekStart, type: 'week', forceOff: colCnt === 1 }}
-            extraAttrs={{ className: 'shrink' }}
-          >{dateEnv.format(weekStart, WEEK_NUM_FORMAT)}</GotoAnchor>
+        <td class='fc-week-number shrink'>
+          <div data-fc-width-all={1}>
+            <GotoAnchor
+              navLinks={options.navLinks}
+              gotoOptions={{ date: weekStart, type: 'week', forceOff: colCnt === 1 }}
+              extraAttrs={{
+                'data-fc-width-content': 1
+              }}
+            >{dateEnv.format(weekStart, WEEK_NUM_FORMAT)}</GotoAnchor>
+          </div>
         </td>
       ]
     }

packages/timegrid/src/TimeColsSlats.tsx

@@ -63,14 +63,18 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
       slotDate = dateEnv.add(dayStart, slotTime)
       isLabeled = wholeDivideDurations(slotIterator, labelInterval) !== null
 
+      let classNames = [ 'fc-axis', 'fc-time', theme.getClass('tableCellNormal') ]
       let axisNode =
-        <td class={'fc-axis fc-time ' + theme.getClass('tableCellNormal')}>
-          {isLabeled &&
-            <span class='shrink'>
-              {dateEnv.format(slotDate, labelFormat)}
-            </span>
-          }
-        </td>
+        isLabeled ?
+          <td class={classNames.concat('shrink').join(' ')}>
+            <div data-fc-width-all={1}>
+              <span data-fc-width-content={1}>
+                {dateEnv.format(slotDate, labelFormat)}
+              </span>
+            </div>
+          </td>
+          :
+          <td class={classNames.join(' ')} />
 
       rowsNodes.push(
         <tr

packages/timegrid/src/TimeColsView.tsx

@@ -241,10 +241,12 @@ export default abstract class TimeColsView extends View {
     }
 
     return [
-      <td class={'fc-axis' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}>
-        <span {...spanAttrs} class='shrink'>
-          {child}
-        </span>
+      <td class={'shrink fc-axis' + theme.getClass('tableCellNormal')} style={this.getAxisStyles()}>
+        <div data-fc-width-all={1}>
+          <span {...spanAttrs} data-fc-width-content={1}>
+            {child}
+          </span>
+        </div>
       </td>
     ]
   }

packages/timegrid/src/styles/_view.scss

@@ -22,7 +22,11 @@
 
 .fc-timeGrid-view .fc-axis {
   vertical-align: middle;
-  padding: 0 4px;
+
+  span { // bad selector
+    white-space: nowrap;
+    padding: 0 4px;
+  }
 }