0

Using material UI for the styling.

Is it possible to place an HTML element or Typography element to the left side of a Grid and have it still be on the same line?

Here is a small snippet of the code.

  return (
    <Wrapper>
      <form>
        <Grid container spacing={1}>
          <Grid item xsn={8}>
            <SideLabel>{labels.dates}</SideLabel>
          </Grid>
          <Grid item xsn={22}>
            <DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
          </Grid>
          <Grid item xsn={23}>
            <DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
          </Grid>
          <Grid item xsn={47} />
        </Grid>
      </form>
    </Wrapper>
  );

Lets say for example, I want to add a typography element and have it shown on the same line as grid items serviceDateOne and serviceDateTwo, what would that look like? I've tried 

  return (
    <Wrapper>
      <form>
      <Typography>TEST</Typography>
        <Grid container spacing={1}>
          <Grid item xsn={8}>
            <SideLabel>{labels.dates}</SideLabel>
          </Grid>
          <Grid item xsn={22}>
            <DatePicker name="serviceDateOne" label={labels.serviceDateOne} />
          </Grid>
          <Grid item xsn={23}>
            <DatePicker name="serviceDateTwo" label={labels.serviceDateTwo} />
          </Grid>
          <Grid item xsn={47} />
        </Grid>
      </form>
    </Wrapper>
  );

Add the Typography element is displayed above the line where serviceDateOne and serviceDateTwo are. BTW, the component is just a styled div. The element is included as part of the Grid, what i'm trying to achieve is to place that element outside of the grid and to the left of the form, acting like side labels for that row, and only have the grid items as part of the grid

ghostagent151
  • 1,218
  • 2
  • 16
  • 33

1 Answers1

1

Grid is using for the seperation, so just make the seperation at the top level.

enter image description here

  return (
    <>
      <Grid container spacing={1}>
        <Grid item xs={3} style={{ backgroundColor: "lightgray" }}>
          <Typography>TEST</Typography>
        </Grid>
        <Grid item xs={9}>
          XXX
          <Grid container spacing={1}>
            <Grid item xs={12}>
              YYY
            </Grid>
            <Grid item xs={6}>
              ZZ
            </Grid>
            <Grid item xs={6}>
              ZZ
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </>
  );

Update

Show two child in one line: ref QA

enter image description here

  return (
    <div style={{ display: "flex" }}>
      <Typography style={{ backgroundColor: "lightgray", width: 100 }}>
        TEST
      </Typography>
      <Grid container spacing={1} style={{ backgroundColor: "gray" }}>
        <Grid item xs={12}>

Edit pensive-glade-qm8cg

keikai
  • 14,085
  • 9
  • 49
  • 68
  • Its a weird ask from the business side, but theyre wanting to have the TEST element outside of the grid. I've been playing around with it but haven't made much progress with that sort of implementation. – ghostagent151 Feb 27 '20 at 17:29
  • @ghostagent151 Updated – keikai Feb 27 '20 at 17:39