A space to discuss online store customization, theme development, and Liquid templating.
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!
Solved! Go to the solution
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!
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!
Sorry to say, but that pen fails: