actually fix view-height

fullcalendar · Oct 1, 2024 · 08c4c1b · 08c4c1b
1 parent e0f08ca
commit 08c4c1b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/standard/packages/core/src/component/CalendarContent.tsx b/standard/packages/core/src/component/CalendarContent.tsx
@@ -54,12 +54,13 @@ export class CalendarContent extends PureComponent<CalendarContentProps> {
     )
 
     let viewHeight: CssDimValue | undefined
+    let viewHeightLiquid = false
     let viewAspectRatio: number | undefined
 
     if (props.forPrint || getIsHeightAuto(options)) {
-      ; // don't set any heights
+      ;
     } else if (options.height != null) {
-      ; // nothing to do. already set via Calendar::setHeight
+      viewHeightLiquid = true
     } else if (options.contentHeight != null) {
       viewHeight = options.contentHeight
     } else {
@@ -92,6 +93,7 @@ export class CalendarContent extends PureComponent<CalendarContentProps> {
         )}
         <ViewHarness
           height={viewHeight}
+          heightLiquid={viewHeightLiquid}
           aspectRatio={viewAspectRatio}
         >
           {this.renderView(props)}

diff --git a/standard/packages/core/src/component/ViewHarness.tsx b/standard/packages/core/src/component/ViewHarness.tsx
@@ -3,31 +3,31 @@ import { CssDimValue } from '../scrollgrid/util.js'
 
 export interface ViewHarnessProps {
   height?: CssDimValue
+  heightLiquid?: boolean
   aspectRatio?: number
   children: ComponentChildren
 }
 
 export class ViewHarness extends Component<ViewHarnessProps> {
   render() {
     const { props } = this
-    const { height, aspectRatio } = props
-    const fixedHeightEnabled = height != null
-    const aspectRatioEnabled = !fixedHeightEnabled && aspectRatio != null
 
     return (
       <div
         className={[
           'fc-view-harness',
-          fixedHeightEnabled
+          props.height != null
             ? 'fc-view-harness-fixedheight'
-            : aspectRatioEnabled
-              ? 'fc-view-harness-aspectratio'
-              : 'fc-view-harness-liquid',
+            : props.heightLiquid
+              ? 'fc-view-harness-liquid'
+              : props.aspectRatio != null
+                ? 'fc-view-harness-aspectratio'
+                : ''
         ].join(' ')}
         style={{
-          height,
-          paddingBottom: aspectRatioEnabled
-            ? `${(1 / aspectRatio) * 100}%`
+          height: props.height,
+          paddingBottom: props.aspectRatio != null
+            ? `${(1 / props.aspectRatio) * 100}%`
             : undefined
         }}
       >

diff --git a/standard/packages/core/src/styles/view-harness.css b/standard/packages/core/src/styles/view-harness.css
@@ -3,11 +3,14 @@
   position: relative; // for aspectratio AND for being origin for premium-message at bottom-left corner
 }
 
+.fc-view-harness-liquid,
 .fc-view-harness-fixedheight {
   display: flex;
   flex-direction: column;
 }
 
+.fc-view-harness-liquid,
+.fc-view-harness-liquid > .fc-view,
 .fc-view-harness-fixedheight > .fc-view {
   // liquid
   flex-basis: 0;
@@ -22,16 +25,3 @@
   right: 0;
   bottom: 0;
 }
-
-.fc-view-harness-liquid {
-  display: flex;
-  flex-direction: column;
-}
-
-.fc-view-harness-liquid,
-.fc-view-harness-liquid > .fc-view {
-  // liquid
-  flex-grow: 1;
-  flex-basis: 0;
-  min-height: 0;
-}