I have a card which has a table nested inside it. The card expands as the table expands. However when the table has no data or a single entry, the card also shrinks. I want to set a minimum height to the card so that even if my table inside has just one entry or no entries , the card does not shrink. However it should expand when the table gets populated by more rows.
My code is as follows:
const BaseCard = () =>
<div id="card-containerBase">
<Card
style={{
width: '100%',
margin: 'auto',
padding: '10px',
backgroundColor: '#ECEFF1',
}}
>
I have a card which has a table nested inside it. The card expands as the table expands. However when the table has no data or a single entry, the card also shrinks. I want to set a minimum height to the card so that even if my table inside has just one entry or no entries , the card does not shrink. However it should expand when the table gets populated by more rows.
My code is as follows:
const BaseCard = () =>
<div id="card-containerBase">
<Card
style={{
width: '100%',
margin: 'auto',
padding: '10px',
backgroundColor: '#ECEFF1',
}}
>
Share
Improve this question
asked Oct 18, 2017 at 7:01
SeaWarrior404SeaWarrior404
4,16816 gold badges47 silver badges66 bronze badges
2
-
2
Have you tried to set
min-height
on you card/table ? – Krusader Commented Oct 18, 2017 at 7:03 - Yeah this worked. Thanks! – SeaWarrior404 Commented Oct 18, 2017 at 7:07
2 Answers
Reset to default 3just add the following style:
minHeight: '30vw'
As @Krusader points out, the minimum height can be set using min-height. However inside material UI Card styling the property should be set as minHeight. I set the parameter as:
minheight: '30vw'