Material ui place element at bottom on mobile, desktop, tablet responsive

user_5646315 0
Viewed 740

I am a beginner at layout design and working on a web app for mobile and desktop using React and Material UI. I need to put app navigation at the bottom. The problem is app navigation is in a different place depending on mobile screen resolution. (iPhone X and iPhone 7). How to place it so that it will be responsive on multiple mobile devices and possibly on tablet and desktop?

enter image description here

enter image description here
React and Material UI code:

const useStyles = makeStyles({
  divContainer: {
    display: 'flex',
    alignItems: 'flex-end',
    height: '99vh',
  },
  root: {},
});

export default function SimpleBottomNavigation() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  return (
    <Container className={classes.divContainer}>
      <BottomNavigation
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        showLabels
        className={classes.root}
      >
        <BottomNavigationAction label="Home" icon={<HomeRoundedIcon />} />
        <BottomNavigationAction label="Wishlist" icon={<FavoriteIcon />} />
        <BottomNavigationAction
          label="Add"
          icon={<AddCircleOutlineRoundedIcon />}
        />
        <BottomNavigationAction
          label="Notifications"
          icon={<NotificationsIcon />}
        />
        <BottomNavigationAction
          label="Profile"
          icon={<AccountCircleRoundedIcon />}
        />
      </BottomNavigation>
    </Container>
  );
}
material-ui reactjs css
1 Answers

sandbox

create the root as below in the useStyle:

const useStyles = makeStyles({
  root: {
    position: "fixed",
    bottom: "0px",
    left: "0px",
    right: "0px",
    marginBottom: "0px",
    width: "100vw",
    backgroundColor: "red",
}
});

And then assing it as the className to the BottomNavigation component:

<BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
      className={classes.root}
    >

Then, it would be placed at the bottom of the page on different devices.

user_117669470
Related