Don't work with Flexbox about react-to-print HOT 3 CLOSED

matthewherbst commented on June 20, 2024

Don't work with Flexbox

from react-to-print.

Comments (3)

gregnb commented on June 20, 2024

Please share a sandbox or working example to replicate the issue

from react-to-print.

julioxavierr commented on June 20, 2024

Hi, @gregnb! Thanks for the response and sorry for the late reply.

I am using styled components plus react-to-print. Haven't tested without styled yet, but will give it a try.

Here follows the render example, with comments:

<ContentWrapper ref={el => (this.componentRef = el)}>
  <ReactToPrint
    trigger={() => <Icon href="#">print</Icon>} // Icon from material-ui
    content={() => this.componentRef}
  />
  <SectionTitle>Candidate</SectionTitle>
  <Row> // Here's where the problem really happens, flexbox isn't recognized at all
    <Paragraph>
      <FieldText>Name:</FieldText> {name}
    </Paragraph>
    <Paragraph>
      <FieldText>Date:</FieldText>{' '}
      {new Date()}
    </Paragraph>
  </Row>
  <Row> // Here too
    <Paragraph>
      <FieldText>E-mail:</FieldText> {email}
    </Paragraph>
    <Paragraph>
      <FieldText>Phone:</FieldText> {phone}
    </Paragraph>
  </Row>
</ContentWrapper>

In this example, I have styled div called Row that should render childrens side by side. It works on my layout correctly, but not on react-to-print, he just ignores Flexbox whenever I try to use it.
This gives you some insight of what's happening?

from react-to-print.

julioxavierr commented on June 20, 2024

Made a simpler example on CodeSandbox and it appear to work correctly. Will close this for now.

https://codesandbox.io/s/rrq34wq6lp

from react-to-print.

Recommend Projects