fix(card): content shrinks in horizontal orientation and action butto…

…ns with horizontal layout
telerik · Jan 8, 2024 · 0ec00d0 · 0ec00d0
1 parent f3ba688
commit 0ec00d0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss
@@ -191,6 +191,10 @@
         gap: $kendo-card-actions-gap;
     }
 
+    .k-card-horizontal .k-actions-horizontal {
+        width: auto;
+    }
+
     // List
     .k-card-list {
         display: flex;

diff --git a/packages/fluent/scss/card/_layout.scss b/packages/fluent/scss/card/_layout.scss
@@ -192,6 +192,10 @@
         gap: var( --kendo-card-actions-gap, #{$kendo-card-actions-gap} );
     }
 
+    .k-card-horizontal .k-actions-horizontal {
+        width: auto;
+    }
+
     // List
     .k-card-list {
         display: flex;

diff --git a/packages/html/src/card/tests/card-horizontal.tsx b/packages/html/src/card/tests/card-horizontal.tsx
@@ -5,7 +5,7 @@ import { Button } from '../../button';
 
 const styles = `
     .k-card {
-        height: 300px;
+        height: 250px;
     }
     .k-card-media {
         display: block;
@@ -17,7 +17,7 @@ const styles = `
 export default () =>(
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
 
             <CardHorizontal />
 
@@ -96,6 +96,16 @@ export default () =>(
                 </ActionButtons>
             </CardHorizontal>
 
+            <CardHorizontal >
+                <CardBody title="Card Title" subtitle="Horizontal card - Action buttons with horizontal layout.">
+                    <p>Horizontal card - Action buttons with horizontal layout.</p>
+                </CardBody>
+                <ActionButtons className="k-card-actions">
+                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
+                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                </ActionButtons>
+            </CardHorizontal>
+
         </div>
     </>
 );