web-dev-qa-db-fra.com

Débordement du tiroir de l'interface utilisateur matérielle provoquant une barre de défilement sur le corps

J'utilise un écrêté sous le tiroir de la barre d'application avec une toile comme contenu principal. J'ai trois cartes pliables dans le tiroir et quand tout est configuré pour être ouvert par défaut, il montre une barre de défilement verticale sur le corps et un espace blanc sous l'élément html avec l'élément corps. Si vous fermez les trois cartes, le parchemin disparaît. Si vous rouvrez les cartes, le parchemin n'apparaît pas. Le problème ne semble se produire que lorsque la page est chargée avec les trois cartes ouvertes.

Notre solution à court terme consiste à charger la page avec seulement deux cartes ouvertes, mais je tiens à noter que même avec deux cartes ouvertes, le contenu du tiroir s'étend sous la fenêtre sans défilement. Le CSS pour le tiroir ne devrait pas non plus être le problème. Quelqu'un d'autre a rencontré ce problème?

  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>
reactjscanvasmaterial-ui
8
Seth Duncan

Vous devez ajouter height: 100% la propriété css sur certains composants du conteneur et les styles à drawerPaper doivent également être ajoutés.

J'ai installé ici, son fonctionnement, mais dépend probablement des composants du conteneur:

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