CODEWITHSUNDEEP
htmlcssreactjs
Big Guy
Big Guy

Reputation: 782

Changing Card height in Reactstrap

I am working with Reactstrap and in order to make a certain Card responsive to the size of the window, I want to fix its aspect ratio with percentages, not pixels.

For some reason, this works for width but NOT for height. https://codepen.io/anon/pen/xpwOGL

The first line is the problem. If I set height to a constant, say height:"200px", it will make it 200px just fine. And if I change the width %, it will change the width to match. But for some reason height % just doesn't do anything. 

<Card style={{width:"80%", height:"60%"}}> 
   <Row className="no-gutters" style={{position: "absolute"}}>
      <Col xs="auto">
        <button>
          Next image
        </button>
      </Col>
      <Col xs="auto">
        <button>
          Previous image
        </button>
      </Col>
    </Row>
 </Card>

Is there a different way that I'm supposed to use to make this responsive?

Upvotes: 3

Views: 21770

Answers (2)

user7207170
user7207170

Reputation:

The % dimensions are always in relation to the parent container of the current element. In this case, your current element is Card and its parent is the div with id app but it has no height fixed. You need to have some absolute value of the parent container, then you can make its child element have its % dimension. If you fix the <div id="app"> height to a certain value, the Card will follow.

And as for your query why it works for width but not for height?

The height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

And as far as width is concerned, the body of the HTML has a default width of 100% and its the super-parent element but it also has no height defined unless you specify it or you add elements which expand its height.

Upvotes: 7

siddharth jain
siddharth jain

Reputation: 9

dont waste your time in setting up the pixils/percentages for margin and padding and width or height, it's better to use Reactstrap or Semantic UI and pick what's best for you from there.

Upvotes: -1

Related Questions