CODEWITHSUNDEEP
reactjsmaterial-uiappbar
Mitchy
Mitchy

Reputation: 145

How to make Appbar content not stretch to sides on larger displays

I would like to center my Appbar content, so it doesn't spread to sides of the screen when on larger displays. There are images of how it looks like vs how I would like it to look.

The thing is that on smaller screens, both the Appbar and page content fits right into the screen, but on larger displays, Appbar content continues to spread, while page content stays centered. So I would like the Appbar to stay fullwidth while its content stays on same place as page content - as you can see in second screen.

My page code:

<Box sx={{ display: "flex" }}>
  <CssBaseline />
  <AppBar
    position="fixed"
    sx={{
      marginTop: "10px",
      width: `100%`,
    }}
  >
    <Toolbar>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        edge="start"
        sx={{ mr: 2, display: { sm: "none" } }}
      >
        <MenuIcon />
      </IconButton>
      <Box
        sx={{
          borderBottom: 1,
          borderColor: "divider",
          mr: 2,
          display: { xs: "none", sm: "block", md: "block" },
        }}
      >
        <Tabs
          aria-label="basic tabs example"
          TabIndicatorProps={{
            style: {
              background: "#ffffff",
            },
          }}
        >
         // MY TABS 
        </Tabs>
      </Box>
      <div className={classes.alignRight}>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="right"
        >
          <LogoutRoundedIcon />
        </IconButton>
      </div>
    </Toolbar>
  </AppBar>
  <Box
    component="nav"
    sx={{ width: { sm: 0 }, flexShrink: { sm: 0 } }}
    aria-label="mailbox folders"
  >
  </Box>
  {/* Page content */}
  <Box
    component="main"
    sx={{
      flexGrow: 1,
      p: 3,
    }}
  >
    // MY CONTENT
  </Box>
</Box>

Changing Appbar position tag to position="static" changes it to desired width, but I want only the content of that width.

Upvotes: 3

Views: 5756

Answers (2)

Y H R
Y H R

Reputation: 735

The width of your Appbar is set to 100% — meaning that it would occupy all the space of its flexed parent element Box, you need to give it a fixed width or set a maximum limit how much it can stretch.

Here are some suggestions that could fix your problem:

  • Giving your Appbar a fixed width for each Media query, so that it doesn't extend depending on your screen size.

  • Giving your Appbar a dynamic width combined with an offset such as width=calc(75vw + 2rem), note that the 75vw can be substituted for 75% since the parent component takes up 100% of the width view.

  • Using justifyContent : "space-around" on your Box parent component, to achieve the desired result.

Edit: NearHuscarl's solution seems better.

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

<AppBar position="static">
  <Toolbar
    sx={{
      width: "100%",
      maxWidth: 600,
      mx: "auto"
    }}
  >
  • Set a maxWidth to restrict the width on large screen
  • Set width to 100% to expand the content width within the maxWidth limit above.
  • Set margin left and right to auto to center the Toolbar itself inside the Appbar

Live Demo

Codesandbox Demo

Upvotes: 7

Related Questions