GridItem problem with small screens

Jadi saya mencoba perpustakaan material-kit-react.

berisi hanya satu bekerja sempurna. Tetapi segera setelah saya menambahkan lain, pertama naik, melewati

& keluar dari layar (hanya di layar yang sangat kecil).

Ini kodenya (src/views /Components/Components.js) :

...
const useStyles = makeStyles(styles);

export default function Components(props) {
  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>
      <Header
        brand="Material Kit React"
        rightLinks={<HeaderLinks />}
        fixed
        color="transparent"
        changeColorOnScroll={{
          height: 400,
          color: "white"
        }}
        {...rest}
      />
      <Parallax image={require("assets/img/bg4.jpg")}>
        <div className={classes.container}>
        <GridContainer>
            <GridItem xs={12} sm={6}>
              <div className={classes.brand}>
                <h1 className={classes.title}>Material Kit React.</h1>
                <h3 className={classes.subtitle}>
                  A test Badass Material-UI Kit based on Material Design.
                </h3>
              </div>
            </GridItem>
            <GridItem xs={12} sm={6}>
            <div className={classes.brand}>
                <h1 className={classes.title}>Griditem 2</h1>
                <h3 className={classes.subtitle}>
                  A test Badass Material-UI Kit based on Material Design.
                </h3>
              </div>
            </GridItem>
          </GridContainer>
        </div>
      </Parallax>
...

GridContainer & GridItem keduanya menggunakan material-ui/Grid.

Sunting 1

Setelah melakukan perubahan berikut:

...
<Parallax style={{ border: "solid 5px"}}>
  <div style={{height: "100%"}} className={classes.container}>
    <GridContainer>
...

& tidak termasuk gambar background, sekarang tampilannya seperti ini :

parallax with boder

Rupanya, ketika GridContainer berisi 2 GridItems, komponen induk (Parallax) membanjiri Header. Sekali lagi, hanya di layar yang sangat kecil.

0
rrh 30 Juni 2020, 19:14

1 menjawab

Jawaban Terbaik

Mampu memperbaikinya dengan menambahkan GridItem lain di dalam GridContainer. GridItem ini adalah item pertama & memiliki tinggi minimum sama dengan header, sehingga mencegah item berikutnya naik.

    <Parallax style={{ border: "solid 5px"}}>
      <div style={{height: "100%"}} className={classes.container}>
        <GridContainer>
          <GridItem style={{minHeight: 80, border: "solid 5px"}}>
          </GridItem>
0
rrh 7 Juli 2020, 13:37