React-email with Novu: Template structure breaks
I am a beginner using Novu and i was using the Email Channel of Novu for rendering my react-email templates,
In my case I was using render function of react-email and passing the rendered HTML in the content field of Workflow instance of the novu/framework package.
My templates use flex property in it to acquire the full viewport height, so when i trigger the email, the structure of the mail breaks and the flex-direction property goes missing, due to which the flexing happens horizontally . I think novu does not recognise this css property or is there a glitch
what is the possible reason for it and how do i Overcome it?
3 Replies
Hey Jayanth
Can you share the example react email code with that flex-direction property? Kindly remove/hide any private information
Can you share the example react email code with that flex-direction property? Kindly remove/hide any private information
const BaseEmailTemplate = ({
userName,
previewText ,
}: BaseEmailProps) => {
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
},
fontFamily: {
},
},
},
}}
>
<Body className="bg-background-color mx-auto mt-0 mb-0 font-inter flex flex-col h-screen">
<Container className="max-w-[600px] mx-auto pt-[15px] pr-[32px] pl-[32px] bg-white">
<Section className="">
<Img alt="Logo" height={38.93} width={114.8} src="" />
<Hr className="mt-[15px] mb-[8px] border-t-2 border-gray-300 ml-0 -mr-[10px] flex-none" />
</Section>
</Container>
<Container className="flex-1 text-sm/[] text-content-color max-w-[600px] mx-auto pt-[15px] pr-[32px] pb-[15px] pl-[32px] bg-white flex items-start">
<Section className="my-4">
<Text className="text-title-color text-2xl/4 font-semibold font-inter">Title
</Text>
</Section>
<Text>Hi {userName},</Text>
<Text>
some text
</Text>
<Text>
Some text
</Text>
<Section className="font-inter text-content-color]">
<Text className=" text-sm/[20px] font-normal m-0">
Thank you,
</Text>
<Text className=" text-sm/[20px] font-normal m-0">
From Team
</Text>
</Section>
</Container>
<Container className="max-w-[600px] mx-auto pt-[15px] pr-[32px] pb-[15px] pl-[32px] bg-white mt-auto">
<Section className="text-color-footer-text-color text-xs/[18px] text-center my-0 flex-none font-inter">
<Text> footer</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export function renderMail(payload: BaseEmailProps) {
return render(<BaseEmailTemplate {...payload} />);
}
Hi @Pawan Jain ,
Did you get the same issue i am facing while sending this email?
Hi @Pawan Jain ,Can you please help me with this?
@Jayanth
Can you share the specific reason of using
h-screen in body component?
many email clients do not support h-screen property and it can cause layout shift
you can try this
<Body className="bg-background-color mx-auto mt-0 mb-0 font-inter flex flex-col min-h-[100%]">
@Jayanth
If you could share some screenshot highlighting the issue, then it would be helpful. As this is visual bug, sometimes reproduction becomes tricky
@Jayanth
Thanks for sharing the screenshot in personal message.
flexbox is not supported in gmail
https://stackoverflow.com/questions/39376710/flex-grid-properties-are-deleted-in-gmail-email
https://developers.google.com/gmail/design/css