Shopify polaris edit Card height

Solved

Shopify polaris edit Card height

jay101
Shopify Partner
4 0 1

 Hello,

 

I see that Polaris' Card component adjusts its height based on the contents in it. Is there a way I can make the card have a fixed height? If so, can you show me how? Anything would be great! Thanks!

Accepted Solution (1)

KarlOffenberger
Shopify Partner
1873 184 902

This is an accepted solution.

Hello there!

 

The Shopify Polaris team took a design decision where component customisation is generally not possible, allowed or even endorsed because it isn't meant to be a general purpose UI component library and they'd like to avoid cases where app developers go off on a tangent. They have many good reasons why they chose to do so as can be read here if you're interested.

 

For you specific use case, you could simply have a nested element in the <Card /> like shown here in my quick Pen (check App.js. Used styled-components, works with any of the React styling methods).

 

However, just because it is possible, I wouldn't recommend it and would proceed carefully as the last thing you want to do is introduce inconsistency within the app UI.

 

Best wishes!

View solution in original post

Replies 2 (2)

KarlOffenberger
Shopify Partner
1873 184 902

This is an accepted solution.

Hello there!

 

The Shopify Polaris team took a design decision where component customisation is generally not possible, allowed or even endorsed because it isn't meant to be a general purpose UI component library and they'd like to avoid cases where app developers go off on a tangent. They have many good reasons why they chose to do so as can be read here if you're interested.

 

For you specific use case, you could simply have a nested element in the <Card /> like shown here in my quick Pen (check App.js. Used styled-components, works with any of the React styling methods).

 

However, just because it is possible, I wouldn't recommend it and would proceed carefully as the last thing you want to do is introduce inconsistency within the app UI.

 

Best wishes!

den232
Shopify Partner
213 8 55

Sorry to say, but that pen fails:

 

ModuleNotFoundError
Could not find module in path: '@shopify/polaris/styles.css' relative to '/index.js'