react-html-email
react-html-email copied to clipboard
chromakode
[BUG] Default example kitchenSink.jsx does not display well in default Galaxy S6 email client.
Dear everyone,
I have tested with my Galaxy S6 edge default mail client and I was surprised to see that my template was not working well.
I have then tested with the default and found it to be a non working example:
The content does not display as in thunderbird:
I have reduced the amount of the example code and noticed that it was still present when I only have:
<Email title="Test Email" headCSS={css}>
<Span fontSize={15}>Hello, world!</Span>
</Email>
It generates the following HTML (from thunderbird sourcecode)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.=
org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang=3D"en" xmlns=3D"http://www.=
w3.org/1999/xhtml"><head><meta http-equiv=3D"Content-Type" =
content=3D"text/html; charset=3Dutf-8"/><meta name=3D"viewport" =
content=3D"width=3Ddevice-width, initial-scale=3D1.0"/><title>Test =
Email</title></head><body style=3D"width:100%;margin:0;padding:0;-webkit-te=
xt-size-adjust:100%;-ms-text-size-adjust:100%"><table width=3D"100%" =
height=3D"100%" cellPadding=3D"0" cellSpacing=3D"0" border=3D"0" =
align=3D"left" valign=3D"top"><tbody><tr><td align=3D"center" =
valign=3D"top"><table width=3D"600" align=3D"center" cellPadding=3D"0" =
cellSpacing=3D"0" border=3D"0" valign=3D"top"><tbody><span =
style=3D"font-family:sans-serif;font-size:15px;line-height:15px;color:#000"=
>Hello, world!</span></tbody></table></td></tr></tbody></table></body></htm=
l>
- Why does it generate two tables just for that simple email? it looks really dumb but I must be missing something.
If I keep just the <Span> the text can display well
<Span fontSize={15}>Hello, world!</Span>
But then the source code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.=
org/TR/xhtml1/DTD/xhtml1-strict.dtd"><span style=3D"font-family:sans-serif;=
font-size:15px;line-height:15px;color:#000">Hello, world!=
</span>
I also see this guys fixing height issues for some other mail client: https://github.com/impossibleventures/react-html-email/commit/bc24f3a02be2c20ab9a5768c117e986691d159cb
This package seems to not be ready for production, is anyone aware of this? How should we fix it?
Any update on this?
Dur anybody expérience issue with android mail client and the display of the example ?