Different height columns in Material UI need fixing

user_14838495 0
Viewed 154

I have some React code that renders a two column layout using Material Design. You can see I am using a which made things centre horizontally, rather than expanding to the edges. But I want my right textbox to be much taller than the left text. But when I change the number of rows, it pushes down my checkboxes.

How do I set it up so that the two columns have the same height but the checkboxes stay just under the left column textbox?

Layout so far

          <ThemeProvider theme={theme}>
            <Container>
              <Grid container spacing={2}>
                {/* <Grid xs={12}>
              <AppBar />
              <br />
            </Grid> */}

                <Grid item xs={12}>
                  <Typography variant="h6" gutterBottom>
                    Keyword Processor
                  </Typography>
                  {/* <br /> */}
                </Grid>
                <Grid item xs={6}>
                  <TextField
                    label="Input Keywords"
                    fullWidth
                    multiline
                    rows={10}
                    variant="outlined"
                    margin="normal"
                    onChange={this.handleInputText}
                    defaultValue={defaultInputText}
                  />

                  <br />
                  <Button
                    variant="contained"
                    color="primary"
                    mt={5}
                    onClick={this.inputToOutput}
                    //**********************
                  >
                    Parse
                  </Button>
                  <Button
                    variant="contained"
                    color="secondary"
                    mt={5}
                    // onClick={this.parseInput}
                  >
                    Clear
                  </Button>

                  <br />
                  <br />
                </Grid>
                <Grid item xs={6}>
                  <TextField
                    label="Output Keywords"
                    fullWidth
                    multiline
                    rows={20}
                    variant="outlined"
                    margin="normal"
                    value={this.state.outputText}
                  />
                  <Button
                    variant="contained"
                    color="primary"
                    mt={5}
                    onClick={this.clearOutput}
                  >
                    Copy
                  </Button>
                  <Button
                    variant="contained"
                    color="secondary"
                    mt={5}
                    onClick={this.clearOutput}
                  >
                    Clear
                  </Button>
                </Grid>
                <Grid>
                  <br />
                  <br />
                  <Checkboxes
                    handleDedupe={this.handleDedupe}
                    handleRemoveNumbers={this.handleRemoveNumbers}
                    handleConvertToLowercase={this.handleConvertToLowercase}
                    handleOneWordPerLine={this.handleOneWordPerLine}
                  />
                </Grid>
              </Grid>
            </Container>
          </ThemeProvider>
        </div>```
material-ui reactjs
1 Answers

It does that because the right column has expanded (has increased its height), remember the left and right column all together make up xs={12} they cover the whole width, so the checkboxes Grid will always be below the taller column, here is what you can do to make sure checkboxes are just below the left column always.

Remove the last Grid (Checkboxes grid) and move Checkboxes to left Column Grid.

Here it is:

import { FunctionComponent } from 'react';

const Logo: FunctionComponent = () => {
  return (
    <Grid item xs={6}>
      <TextField
        label="Input Keywords"
        fullWidth
        multiline
        rows={10}
        variant="outlined"
        margin="normal"
        onChange={this.handleInputText}
        defaultValue={defaultInputText}
      />

      <br />
      <Button
        variant="contained"
        color="primary"
        mt={5}
        onClick={this.inputToOutput}
      //**********************
      >
      Parse
      </Button>
      <Button
        variant="contained"
        color="secondary"
        mt={5}
      // onClick={this.parseInput}
      >
      Clear
      </Button>
      
      <br />
      <br />
      <Checkboxes
        handleDedupe={this.handleDedupe}
        handleRemoveNumbers={this.handleRemoveNumbers}
        handleConvertToLowercase={this.handleConvertToLowercase}
        handleOneWordPerLine={this.handleOneWordPerLine}
      />
    </Grid>
  );
};

export default Logo;
user_70519800
Related