fix: calc fullscreen height of visualization based on window height (#…

…1621) Fixes issue with bottom of visualization being cut off.
dhis2 · Mar 9, 2021 · 13c79b9 · 13c79b9
1 parent d7d730f
commit 13c79b9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -68,12 +68,6 @@ div:-webkit-full-screen {
     margin: 0px !important;
 }
 
-div:fullscreen .dashboard-item-content,
-div:-webkit-full-screen .dashboard-item-content {
-    height: 95vh !important;
-    width: 100vw !important;
-}
-
 @media print {
     body {
         width: 100% !important;

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -192,9 +192,13 @@ export class Item extends Component {
         return this.props.activeType || this.props.item.type
     }
 
-    getAvailableHeight = width => {
+    getAvailableHeight = ({ width, height }) => {
         if (this.state.isFullscreen) {
-            return '95vh'
+            return (
+                height -
+                this.headerRef.current.clientHeight -
+                this.itemHeaderTotalMargin
+            )
         }
 
         const calculatedHeight =
@@ -261,7 +265,7 @@ export class Item extends Component {
                                         activeType={activeType}
                                         itemFilters={itemFilters}
                                         availableHeight={this.getAvailableHeight(
-                                            dimensions.width
+                                            dimensions
                                         )}
                                         availableWidth={this.getAvailableWidth()}
                                     />