Issue
I have a java application that send a daily email digest built using a thymeleaf template. The email renders correctly in most environments. The only place that seems to be having problems is the native mail client in iOS. For some reason, the content is getting resized there; shrinking down such that the text is unreadably small.
I tried adding
style="white-space: pre-wrap"
to the tag that holds the message content, and it seemed to work at first. Today however, the issue returned and I am at a loss for what is causing it. Below is a screenshot of what the email looks like in iOS.
Any idea what I can do to force the content to match the screen width without resizing?
For reference, here is the template I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Message Center Digest</title>
<style>a {color:#007aae !important;} </style>
</head>
<body>
<table id="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#003575">
<table id="header" width="90%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="35%">
<a href="https://www.foo.edu"><img alt="My Logo" width="100px" border="0" src="https://www.foo.edu/sites/logo_white.png" /></a></td>
<td width="65%">
<h1 style="color: #ffffff; font-family: helvetica, arial, sans-serif; font-weight: normal; font-size: 30px; margin: 0;">Message Center Digest</h1>
<h2 style="margin: 0; font-weight: normal; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 24px;">For <span th:text="${data.day}">Some day</span>, <a href="#" style="color: #ffffff !important; text-decoration: none;"><span th:text="${data.date}">01/01/1970</span></a></h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#EAEEF1">
<table width="90%" id="content" bgcolor="#ffffff" align="center" border="0" cellpadding="15" cellspacing="0" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<a name="pagetop"></a>
<h3 style="font-size: 18px; margin: 0 0 5px 0;">Table of Contents</h3>
<h4 style="margin: 0 0 10px 0; font-size: 13px;"><a href="https://www1.foo.edu/script/LogList.asp">Campus Crime and Fire Safety Logs</a></h4>
<div th:each="entry, stats : ${messageMap}" th:with="channelMessage=${entry.value}">
<h4 th:attr="id=${'header_' + channelMessage.channelId}" th:text="${entry.key}" style="margin: 0; font-size: 13px;">Category</h4>
<ul th:attr="id=${'titles_' + channelMessage.channelId}" id="titles" style="list-style: none; margin: 0 0 10px 0; padding-left: 15px; font-size: 13px;">
<li th:attr="id=${'t_' + message.id + '_' + channelMessage.channelId}" th:each="message : ${channelMessage.messages}"><a th:text="${message.title}" th:href="${'#message_' + message.id + '_' + channelMessage.channelId}">Title 1 </a></li>
</ul>
</div>
<table th:each="entry, stats : ${messageMap}" th:with="channelMessage=${entry.value}" class="category" width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td>
<h2 th:attr="id='category_'+${channelMessage.channelId}" th:text="'Category: ' + ${entry.key}" style="color: #00397C; margin: 0;">Category: Unknown</h2>
<table th:each="message : ${channelMessage.messages}" class="message" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-bottom: solid #ccc 1px;">
<tr>
<td style="font-size: 13px; color: #333333; padding-left: 15px; padding-bottom: 15px; padding-top: 15px;">
<a th:attr="name=${'message_' + message.id + '_' + channelMessage.channelId}" id="message1"></a>
<span th:attr="id=${'title_' + message.id + '_' + channelMessage.channelId}" ><strong th:text="${message.title}">A title</strong></span><br/>
<span th:attr="id=${'from_' + message.id + '_' + channelMessage.channelId}"><strong th:inline="text">[['From: ' + ${message.creatorName} + ' ']]<a th:href="@{mailto:{to}(to=${message.creatorEmail},subject='Re: '+ ${message.title}) }" th:text="'<'+${message.creatorEmail} + '>'">foo@gmail.com</a></strong></span><br/><br />
<div th:switch="${message.isHtml}">
<p style="white-space: pre-wrap" th:attr="id=${'body_' + message.id + '_' + channelMessage.channelId}" th:case="true" th:utext="${message.body}">HTML text</p>
<p style="white-space: pre-wrap" th:attr="id=${'body_' + message.id + '_' + channelMessage.channelId}" th:case="*" th:text="${message.body}">Standard text</p>
</div>
<p><a href="#pagetop">Top</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<br />
<p align="center" style="font-size: 13px;"><em>Update how you receive messages by visiting the Message Center.
For help using the Message Center, email: <a href="mailto:foo@bar.edu">foo@bar.edu</a> or call 555-123-4567.</em></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Solution
I did a similar thing a long time ago.
The thing is that HTML history, I am not sure why really but you have to define everything, and for some reason the body of the page won't take the full size of the screen.
Add this stage between the tags so that it will be like this:
<head>
...somethings
<style> body { margin: auto; width: 100%; } </style>
...somethings
</head>
CSS can change the way the HTML is viewed on the page, so I just added style tag with some CSS.
Look at this example.
You can edit the HTML like a normal web page, so for the next time if a bug occurs then just write the HTML as a textfile.html on your PC, and open it on the browser, then you will be able to control it
like in this video.
Answered By - Dolev Dublon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.