CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Natesh bhat
Natesh bhat

Reputation: 13192

Why doesn't the buttons take the full size of parent here?

enter image description here

I want to make the Repos and stars buttons take the whole height of parent like the github icon. The below code is not working . I also tried giving height:100% for the flatButtonStyle but the whole Paper component's height increases to take the whole page . How to fix this ?

return <>
          <Grid container>
                <Paper>
                    <Button style={flatButtonStyle}><GithubSVG /></Button>
                    <Tooltip title="Visit github.com/nateshmbhat">
                        <a target="_blank" href="https://github.com/nateshmbhat" style={{ padding: '10px' }}>nateshmbhat</a>
                    </Tooltip>
                    <Button style={flatButtonStyle}><i className="fa fa-archive"></i> repos</Button>
                    <Button style={flatButtonStyle}><i className="fa fa-star"></i> Stars</Button>
                </Paper>
          </Grid>
        </>

Upvotes: 0

Views: 66

Answers (1)

Arielle Adams
Arielle Adams

Reputation: 98

The GitHub button is taking up the whole height of the paper container because the GitHub SVG gives it the greatest height and the paper container conforms to its content since it does not possess a fixed height.

In order to set an equal height for all buttons you will either need to set a fixed height on the paper container and set each of the buttons' min-height to 100% or set a fixed height on the buttons with a value matching that of the GitHub button as it possesses the greatest height.

Upvotes: 1

Related Questions