CODEWITHSUNDEEP
cssreactjsmaterial-ui
Jasurbek Nabijonov
Jasurbek Nabijonov

Reputation: 1745

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

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>
  );
}

Upvotes: 3

Views: 1597

Answers (1)

alisasani
alisasani

Reputation: 2968

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.

Upvotes: 2

Related Questions