CODEWITHSUNDEEP
reactjsmaterial-ui
pitazzo
pitazzo

Reputation: 1212

Separate vertically elements with space between in Material UI drawer

I've implemented the following drawer using Material UI (left side of the picture). I want to stick to its bottom the last element in the drawer, as shown in the right side of the picture. In order to do so, I've tried many approaches like using a Grid component, a Box, and divs with flex-box parameter, but nothing worked. How can I achieve that? At the moment, my implementation for the drawer content is somethinkg like this:

  <Grid container spacing={0} direction="column" alignItems="start" justify="space-between" alignContent='space-between'>
    <Grid item xs={12}>
      <Divider />
      <CardHeader
        ...
      />
      <Divider />
      <List>
        <...>
      </List>
      <Divider />
      <List>
        <...>
      </List>
    </Grid>
    <Grid item xs={12}>
      <Divider />
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            Z
          </Avatar>
        }
        title="ZaraHealth"
        subheader="v. 0.1"
      />
    </Grid>
  </Grid>

left: what I got; right: what I want

Any comment will be helpful!

Upvotes: 2

Views: 2463

Answers (1)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22925

Flexbox is the solution. Here is a simplified version with simple divs so you can map this solution to yours

.sidebar {
  height: calc(100vh - 60px); // if topbar is 60px in height
  width: 320px;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  justify-content: space-between;
}
<div class="sidebar">
  <div class="top-nav">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>

  </div>

  <div class="bottom-nav">
    <ul>
      <li>Item1</li>
    </ul>
  </div>

</div>

Upvotes: 2

Related Questions