Child elements of <Grid> rendered on resize even with display property of none

[ramoneguru]

Possible to add some instruction (or a console.warn) indicating that you should only use <Col> elements after the <Grid> container (or is that implied)?

I recently came across an issue where I placed a <Box> with a child of <Alert> right after the <Grid> and it rendered the <Alert> even though the <Box> had the display property of none.

It rendered the alert when the page width was resized under 1280px and there were no errors in the form that would cause it to render.

From the devtools, looks like this was the CSS:

@media screen and (max-width: 80em)
<style>
[class*="ui-component-grid"] > :not([class*="_lg-0"]) {
    display: block;
}

Code in question (fix: wrap <Box> in a full width <Col size="12">):

  const alertDisplayStyle = (!props.hasSomeError) ? "none" : "inline-block";

  <Grid>
    <Box display={alertDisplayStyle} width="100%" marginBottom="space70">
        <Alert variant="error">
          <strong>Missing {alertTypeTitle} information.</strong> Please complete the required
          information below in order to submit your Regulatory Bundle to Twilio.
        </Alert>
      </Box>
    <Col>
     ...
    </Col>
  </Grid>

[SiTaggart]

Judging by the CSS in your snippet there and the fact you are using a component called Col, it looks like you are using the old react-components grid.

If you use the Paste Grid do you get similar results?

[ramoneguru]

Christ, you are correct.