Reactjs – Material UI Drawer overflow causing scrollbar on body

canvasmaterial-uireactjs

I'm using a clipped under the app bar drawer with a canvas as the primary content. I have three collapsible cards in the drawer and when all set to be open by default, it shows a vertical scrollbar on the body and white space below the html element with the body element. If you close all three of the cards the scroll goes away. If you reopen the cards, the scroll doesn't appear. The issue only seems to occur when the page is loaded with all three cards open.

Our short term solution is to load the page with only two cards open, but I want to note even with two open, the drawer content extends below the window with no scroll. The CSS for the drawer shouldn't be the issue either. Anyone else experience this issue?

  drawerPaper: {
    position: 'relative',
    width: 400,
    overflowX: 'hidden',
    overflowY: 'hidden',
    '&:hover': {
      overflowY: 'auto',
    },
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },



   <MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
    <div className={classes.root}>
      <AppBar position="absolute" className={classes.appBar}>
        <Toolbar>
          <div className={classes.flex}>
            <Typography className={classes.headerTextColor} variant="title">
              Title
            </Typography>
            {sealedBy}
          </div>
          <HeaderTools />
          <Tooltip id="toggle-icon" title="Toggle light/dark theme">
            <IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
              <BrightnessMediumIcon />
            </IconButton>
          </Tooltip>
        </Toolbar>
        {spinner}
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <div className={classes.fixedWidth}>
          <div className={classes.toolbar} />
          <DocumentTools />
          <SealingTools />
          <AnnotationTools />
        </div>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <DrawingCanvas />
      </main>
    </div>
  </MuiThemeProvider>

Best Answer

You need to add height: 100% css property on some container components, and to styles to drawerPaper need add too.

I have setup here, its working, but probably depends on container components: 

drawerPaper: {
    width: 250,
    overflow: "auto",
    height: "100%",
    [theme.breakpoints.up("md")]: {
      overflow: "auto",
      width: drawerWidth,
      position: "relative",
      height: "100%"
    }
  }
Related Topic