CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
SeaWarrior404
SeaWarrior404

Reputation: 4168

How to set minimum height on material cards in Material UI?

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',
    }}
   >

Upvotes: 3

Views: 10362

Answers (2)

djoudken
djoudken

Reputation: 31

just add the following style:

minHeight: '30vw'

Upvotes: 3

SeaWarrior404
SeaWarrior404

Reputation: 4168

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'

Upvotes: 2

Related Questions