0

I'm trying to create a container to a react app that has highcharts chart and 3 textboxes. Currently, I'm struggling to get the three textboxes to rearrange under the chart component when resizing screen or switching to a mobile view. How can I achieve wanted functionality? I'm using react with hooks, typescript and material UI.

This is how it looks at the moment:

        <Container className={classes.boxTest2} maxWidth="xl">
          <Grid container spacing={1}>
            <Chart />
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                some info
                <Typography className={classes.tempStyle} variant="h5">
                  {round}&deg;C
                </Typography>
              </Paper>
            </Grid>
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                more info
              </Paper>
            </Grid>
            <Grid item xs={3} md={2} lg={2}>
              <Paper className={classes.paper}>
                even more info
              </Paper>
            </Grid>
          </Grid>
        </Container>

Here is the styling:

  boxTest2: {
    display: "flex"
  },
  tempStyle: {
    color: "red",
    marginTop: "20px",
    textAlign: "center"
  },
  paper: {
    height: 200,
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    elevation: 8,
    maxWidth: "150px"
  },
Roni
  • 11
  • 9
  • Does this answer your question? [Programmatically navigate using React router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – Big boi. Sep 08 '21 at 10:37
  • @I'mastupidguy. Hello, i dont need navigation. I need help on how to automatically rearrange the grid component that i have in my view. – Roni Sep 08 '21 at 10:41

1 Answers1

0

Try to enclose your <Chart/> component into a <Grid item> like this :

<Grid item xs={12}>
    <Chart />
</Grid>
achilleb
  • 169
  • 10
  • Thanks for the help. It works now. Could you also help me in something else? I'm also trying to do the view scrollable. Because now, when i resize the screen, the three components that rearrange themselves beneath the chart are not visible. How should i approach this? – Roni Sep 08 '21 at 12:07