2
votes

La table d'interface utilisateur matérielle ne répond pas lors de l'utilisation de l'exemple de tiroir réactif

J'ai créé une application Web avec la base provenant de l'exemple Material-UI sur un tiroir responsive

J'essaie de faire redimensionner un tableau en fonction de la largeur de l'écran, mais, pour une raison quelconque, le conteneur ResponsiveDrawer fourni par Material-UI brise le réactivité du contenu (c.-à-d. le tableau)

Voici un exemple que je écrit qui est parfaitement réactif:

App.js

import React from "react";
import ReactDOM from "react-dom";
import Table from "@material-ui/core/Table/Table";
import TableHead from "@material-ui/core/TableHead/TableHead";
import TableRow from "@material-ui/core/TableRow/TableRow";
import TableCell from "@material-ui/core/TableCell/TableCell";
import TableBody from "@material-ui/core/TableBody/TableBody";
import Paper from "@material-ui/core/Paper/Paper";
import ResponsiveDrawer from "./ResponsiveDrawer";
import Grid from "@material-ui/core/Grid/Grid";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <ResponsiveDrawer>
        <Grid container justify={"center"}>
          <Grid item xs={12} md={10} style={{ padding: "8px" }}>
            <Paper style={{ overflowX: "auto" }}>
              <Table style={{ minWidth: "340px" }}>
                <TableHead>
                  <TableRow>
                    <TableCell>Name</TableCell>
                    <TableCell>Column</TableCell>
                    <TableCell>Operating System</TableCell>
                    <TableCell>Status</TableCell>
                    <TableCell>CPU Cores</TableCell>
                    <TableCell>Memory (MB)</TableCell>
                    <TableCell>IP Address</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  <TableRow>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                    <TableCell>Content</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </ResponsiveDrawer>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Et voici le même exemple utilisant une version modifiée (changé le contenu en this.props.children au lieu de statique) version de Material- ResponsiveDrawer

ResponsiveDrawer strong strong >

import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import Divider from "@material-ui/core/Divider";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: "flex"
  },
  drawer: {
    [theme.breakpoints.up("sm")]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up("sm")]: {
      width: `calc(100% - ${drawerWidth}px)`
    }
  },
  menuButton: {
    marginRight: 20,
    [theme.breakpoints.up("sm")]: {
      display: "none"
    }
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 3
  }
});

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false
  };

  handleDrawerToggle = () => {
    this.setState(state => ({ mobileOpen: !state.mobileOpen }));
  };

  render() {
    const { classes, theme } = this.props;

    const drawer = (
      <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
        <Divider />
        <List>
          {["All mail", "Trash", "Spam"].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>
                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
              </ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </div>
    );

    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerToggle}
              className={classes.menuButton}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit" noWrap>
              Responsive drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Hidden smUp implementation="css">
            <Drawer
              container={this.props.container}
              variant="temporary"
              anchor={theme.direction === "rtl" ? "right" : "left"}
              open={this.state.mobileOpen}
              onClose={this.handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper
              }}
            >
              {drawer}
            </Drawer>
          </Hidden>
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper
              }}
              variant="permanent"
              open
            >
              {drawer}
            </Drawer>
          </Hidden>
        </nav>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {this.props.children}
        </main>
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  // Injected by the documentation to work in an iframe.
  // You won't need it on your project.
  container: PropTypes.object,
  theme: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);

Je n'arrive tout simplement pas à déterminez ce qui se trouve dans le conteneur ResponsiveDrawer qui provoque la rupture de la réactivité.

Toute l'aide appréciée.

MISE À JOUR (07/01/2019): Il semble que la suppression de display: flex de la racine résout le problème, mais j'ai alors le problème de ne pas respecter le tiroir de gauche.

MISE À JOUR (09/01/2019) : Comme suggéré par @Gaurav Rana, J'ai ajouté width: 100%; à l'élément principal et il a à moitié résolu le problème. Désormais, le tableau débordera / défilera correctement lorsque la barre latérale n'est pas visible. Mais, lorsque la barre latérale est toujours visible mais que l'écran n'est pas assez large pour l'ensemble du tableau, le tableau défile sous la barre latérale.


0 commentaires

3 Réponses :


0
votes

ajoutez du style sous style dans votre styles.css. j'espère que cela résoudra votre problème.

main {
  width: 100%;
}


3 commentaires

Merci pour la réponse! Cela fonctionne donc lorsque l'écran est en dessous du point d'arrêt d'affichage du tiroir, mais ne fonctionne pas lorsque le tiroir est présent codesandbox .io / s / 6zl7r2lx0r


changez ceci () en () dans index.js


merci pour la réponse, mais cela n'a pas non plus résolu le problème. Le problème est que lorsque la barre latérale est toujours visible, mais que la largeur de l'écran est suffisamment petite pour que le tableau ne rentre pas, le tableau défile sous la barre latérale



4
votes

Après un peu de dépannage, j'ai trouvé une solution:

Les styles du contenu doivent être mis à jour comme suit (cela forcera la largeur de l'élément de contenu à s'adapter au largeur de l'écran moins le tiroir si nécessaire):

  content: {
    [theme.breakpoints.up("sm")]: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`
    }
  },

Et display: flex doit être supprimé de la racine

https://codesandbox.io/s/1zxp2qjmoj


0 commentaires

1
votes

c'est un problème de largeur css width. Vous devez spécifier les parents entiers width: 100% comme ceci

body {
  width: 100%
}
.grandparent {
  width: 100%
}
.parent {
  width: 100%
}
.tableContainer {
  width: 100%
}


0 commentaires