material-ui BottomNavigation does not fill the width

user_13779746 0
Viewed 1389

I am using BottomNavigation from material ui which has 5 items. I assumed that these 5 items would always show irrespective of the actual width of the phone/tablet. However, when tested in various phone configurations using chrome, I see this is not the case. For example see following images:

enter image description here

enter image description here

And my code is:

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';


import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ExploreOutlinedIcon from '@material-ui/icons/ExploreOutlined';
import RadioOutlinedIcon from '@material-ui/icons/RadioOutlined';
import PersonOutlineIcon from '@material-ui/icons/PersonOutline';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import MoreHorizOutlinedIcon from '@material-ui/icons/MoreHorizOutlined';
import NavigatorPane from './Components/NavigatorPane';



const useStyles = makeStyles({
    root: {
        width: '100%',
        position: 'fixed',
        bottom: 0,
    },
});



const App = () => {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    return (
        <div>
            <BrowserRouter>
                <NavigatorPane></NavigatorPane>
                <BottomNavigation
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                    className={classes.root}
                >
                    <BottomNavigationAction component={Link} to="/explorer" label="Explore" icon={<ExploreOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/radio" label="Radio" icon={<RadioOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/mymusic" label="My Music" icon={<PersonOutlineIcon />} />
                    <BottomNavigationAction component={Link} to="/search" label="Search" icon={<SearchOutlinedIcon />} />
                    <BottomNavigationAction component={Link} to="/more" label="More" icon={<MoreHorizOutlinedIcon />} />

                </BottomNavigation>
            </BrowserRouter>
        </div>
    );
}

export default App;

I am new to PWA/React/CSS and any pointers is very appreciated.

progressive-web-apps material-ui reactjs
2 Answers

The issue here is that the BottomNavigationAction components are set to take up 80px minimum width - that is why they overflow in smaller screens

enter image description here

I suggest you control it using media queries

const useStyles = makeStyles({
  root: {
    width: "100%",
    position: "fixed",
    bottom: 0,
    "& .MuiBottomNavigationAction-root": {
      "@media (max-width: 768px)": {
        minWidth: "auto",
        padding: "6px 0"
      }
    }
  }
});
user_86808050

I'm using the same component and came across the same problem, I solved it by applying this style to the root, as below

 root: {
    position: "fixed",
    bottom: "0px",
    left: "0px",
    right: "0px",
    width: "100%",
    height: "60px",
    backgroundColor: "#24242D"
  }

https://codesandbox.io/s/9xdc0?file=/demo.js

user_109408680
Related