fix(flyout): content height wrong without header

Whenever a flyout contains actions but no header, the content height is miscalculated and the action container is misaligned. The resize calculation is also fixed now, as it was always expecting all 3 nodes (header,content,actions). Now it also works, if some or even none of them is available inside the flyout
fomantic · Jan 13, 2023 · 8aa6c67 · 8aa6c67
1 parent a417fa7
commit 8aa6c67
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/definitions/modules/flyout.js b/src/definitions/modules/flyout.js
@@ -557,9 +557,12 @@
                         var
                             $header = $module.children(selector.header),
                             $content = $module.children(selector.content),
-                            $actions = $module.children(selector.actions)
+                            $actions = $module.children(selector.actions),
+                            newContentHeight = ($context.height() || 0) - ($header.outerHeight() || 0) - ($actions.outerHeight() || 0)
                         ;
-                        $content.css('min-height', ($context.height() - $header.outerHeight() - $actions.outerHeight()) + 'px');
+                        if (newContentHeight > 0) {
+                            $content.css('min-height', String(newContentHeight) + 'px');
+                        }
                     },
                 },
 

diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less
@@ -101,11 +101,19 @@
 }
 .ui.flyout.left > .content,
 .ui.flyout.right > .content {
+    min-height: @contentMinHeightWithoutHeader;
+}
+.ui.flyout.left > .header + .content,
+.ui.flyout.right > .header + .content {
     min-height: @contentMinHeight;
 }
 & when(@variationFlyoutScrolling) {
     .ui.flyout.left > .scrolling.content,
     .ui.flyout.right > .scrolling.content {
+        max-height: @scrollingContentMaxHeightWithoutHeader;
+    }
+    .ui.flyout.left > .header + .scrolling.content,
+    .ui.flyout.right > .header + .scrolling.content {
         max-height: @scrollingContentMaxHeight;
     }
 

diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables
@@ -45,7 +45,9 @@
 
 /* Scrolling Content */
 @contentMinHeight: calc(100vh - 9.1rem);
+@contentMinHeightWithoutHeader: calc(100vh - 4.7rem);
 @scrollingContentMaxHeight: @contentMinHeight;
+@scrollingContentMaxHeightWithoutHeader: @contentMinHeightWithoutHeader;
 @scrollingContentMaxHeightTopBottom: calc(80vh - 9.1rem);
 
 /* Close Icon */