fix(card): expand body instead of header and footer (#1194)

* fix(card): expand body instead of header and footer * Update packages/elements/src/card/index.ts Co-authored-by: Napat Bualoy <[email protected]> * Update packages/elements/src/card/index.ts Co-authored-by: Napat Bualoy <[email protected]> --------- Co-authored-by: Napat Bualoy <[email protected]>
Refinitiv · Jul 5, 2024 · 160784e · 160784e
1 parent 932232c
commit 160784e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-card.less b/packages/elemental-theme/src/custom-elements/ef-card.less
@@ -17,15 +17,6 @@
     position: relative;
   }
 
-  [part~='body'] {
-    overflow: auto;
-  }
-
-  [part~='header'],
-  [part~='footer'] {
-    flex: 1 0 auto;
-  }
-
   [part~='header'] {
     padding-bottom: inherit;
     min-height: @button-height;

diff --git a/packages/elements/src/card/index.ts b/packages/elements/src/card/index.ts
@@ -49,13 +49,26 @@ export class Card extends BasicElement {
         display: flex;
         flex-flow: column nowrap;
       }
+
       [part~='header'] {
         display: flex;
       }
+
       [part~='header-body'] {
         flex: 1;
         min-width: 0px;
       }
+
+      [part~='body'] {
+        overflow: auto;
+        flex: 1;
+      }
+
+      [part~='header'],
+      [part~='footer'] {
+        flex: 0 0 auto;
+      }
+
       [part~='footer']:not([part~='has-content']),
       [part~='header']:not([part~='has-content']) {
         display: none;