Question 45950 in CSS Question posted in
Some basic documentation can be found here.

How to keep fixed element with dynamic height at the bottom in react – CSS

I have a fixed element with dynamic height (changing when resizing the browser width ) like the example below :
https://stackblitz.com/edit/react-yuqarh?file=demo.tsx

the element working like a menu :

  • it should be opened in first load (it work)
  • hidden when user press hide (partially work)
  • when click on menu icon open (it work)

in hidden mode I used negative bottom value but this value is fixed while the element height changing if the user resize the browser which causes the element to disappear.

this element is actually a search component with some inputs but I simplified

Tags:

3

Answers


  1. 0

    This should work

    import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Demo() {
  const [open, setOpen] = React.useState(true);
  return (
    <div style={{ position: 'fixed', bottom: 0 }}>
      <div>
        <IconButton onClick={() => setOpen(!open)}>
          <MenuIcon />
        </IconButton>
        {open && (
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
          </Box>
        )}
      </div>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    If you want to move this element ouside the viewport, you can use transform: translateY(100%); instead of bottom: -125px

    import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { IconButton, Box, Button, Grid } from '@mui/material';
export default function Demo() {
  const [transform, setTransform] = React.useState('0px');

  return (
    <div style={{ position: 'fixed', bottom: '0px', transform: `translateY(${transform})` }}>
      <div>
        <IconButton onClick={() => setTransform('0')}>
          <MenuIcon />
        </IconButton>
        <Box>
          <Grid container>
            <Box
              sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
            ></Box>
            <Box
              sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
            ></Box>
          </Grid>
          <Button onClick={() => setTransform('calc(100% - 40px)')}>hide</Button>
        </Box>
      </div>
    </div>
  );
}
    Login or Signup to reply.
  3. 0

    If we don’t do conditional rendering, which I believe would be the ideal solution (for that case, the other answer would be the way to go), the solution to your issue would require simply to extract your burger menu from the div that disappears, as it follows:

    export default function Demo() {
  const [showMenu, setShowMenu] = React.useState('0px');

  return (
    <>
      <IconButton onClick={() => setShowMenu('0px')}>
        <MenuIcon />
      </IconButton>
      <div style={{ position: 'fixed', bottom: showMenu }}>
        <div>
          <Box>
            <Grid container>
              <Box
                sx={{ height: '50px', width: '150px', backgroundColor: 'red' }}
              ></Box>
              <Box
                sx={{ height: '30px', width: '150px', backgroundColor: 'grey' }}
              ></Box>
            </Grid>
            <Button onClick={() => setShowMenu('-125px')}>hide</Button>
          </Box>
        </div>
      </div>
    </>
  );
}

    I would even go as far as suggesting you to have a useToggle custom hook that would have the logic of showing/hiding elements, as it’s something fairly common and you most likely will be using it in other components.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search