Solved: Re: Gmail Rendering Issue: Excessive Space Before ...

Nani · 08-28-2023 11:35 PM

Hi Everyone,

I am trying to get email of related values in a Table format through HTML Code in the Email Body (Bots -> Events -> Run this process). I'm encountering an issue with Gmail's rendering of my email templates, when using HTML Code. When I send out emails, I'm consistently noticing a significant amount of space before the table containing the content. I’m at a loss for why this is happening and how to fix it.

Has anyone else encountered a similar issue with Gmail's rendering? If so, could you please share any insights or solutions that might help me resolve this spacing problem? I'd greatly appreciate your input and expertise.

Thank you in advance for your help!

And here is the HTML Code, that is present in the Email Body

<thead>

<tr>

<th style="border: 1px solid black; text-align: center;">Serial Number</th>

<th style="border: 1px solid black; text-align: center;">Quantity</th>

<th style="border: 1px solid black; text-align: center;">Mode of Payment</th>

</tr>

</thead>

<tbody>

<<Start: [Related 5.1. TR]>>

<tr>

</tr>

<<End>>

</tbody>

</table>

lizlynch

@Nani @SkrOYC - Apologies for the inconvenience.

In this article: https://support.google.com/appsheet/answer/11449723

We provide the following guidance:

If there is a large gap between the email preheader and the email body text, try the following:

Set all page margins to 0.
Set the Page Setup to A4

Can you try this to see if it works to address your issues? Otherwise, I can check with the AppSheet dev team. Though, I suspect the best plan would be to contact Support for assistance so they can potentially gain access to your app to help troubleshoot.

Liz

View solution in original post

Nani

Can you help me with the issue SkrOYC

Nani

Can any one of you help me the issue @Suvrutt_Gurjar @Koichi_Tsuji @dbaum @Marc_Dillon @SkrOYC

SkrOYC

Check your PreHeader

Nani

I have updated the code and when I previewed the email, I getting what I wanted, but somehow I am getting space in the real email.

Here is the updated code

<!DOChtml>
<head></head>
<body>

<thead>

<tr>

<th style="border: 1px solid black; text-align: center;">Serial Number</th>

<th style="border: 1px solid black; text-align: center;">Quantity</th>

<th style="border: 1px solid black; text-align: center;">Mode of Payment</th>

</tr>

</thead>

<tbody>

<<Start: [Related 5.1. TR]>>

<tr>

</tr>

<<End>>

</tbody>

</table>

</div>

</body>

</html>

Nani

Can any one of you help me the issue @Suvrutt_Gurjar @Koichi_Tsuji @dbaum @Marc_Dillon @SkrOYC @AleksiAlkio @WillowMobileSys @Tommy62

jrullan

You could check if there are any CSS properties that you could use to manipulate the space around the table. Also, seeing that you are using Gmail, you could use a Google Docs template. In GDocs you simply change the page margins to control that distance.

SkrOYC

<!DOCTYPE html>
<head></head>
<body>
  <div class="header">
    <table style="border-collapse: collapse; width: 100%; border: 1px solid black;">
      <thead>
        <tr>
          <th style="border: 1px solid black; text-align: center;">IR</th>
          <th style="border: 1px solid black; text-align: center;">Serial Number</th>
          <th style="border: 1px solid black; text-align: center;">Quantity</th>
          <th style="border: 1px solid black; text-align: center;">RA</th>
          <th style="border: 1px solid black; text-align: center;">Mode of Payment</th>
        </tr>
      </thead>
      <tbody>
        <p>&lt;&lt;Start: [Related 5.1. TR]&gt;&gt;</p>
        <tr>
          <td style="border: 1px solid black; text-align: center;">&lt;&lt;[IR]&gt;&gt;</td>
          <td style="border: 1px solid black; text-align: center;">&lt;&lt;[Serial Number]&gt;&gt;</td>
          <td style="border: 1px solid black; text-align: center;">&lt;&lt;[Quantity]&gt;&gt;</td>
          <td style="border: 1px solid black; text-align: center;">&lt;&lt;[RA]&gt;&gt;</td>
          <td style="border: 1px solid black; text-align: center;">&lt;&lt;[Mode of Payment]&gt;&gt;</td>
        </tr>
        <p>&lt;&lt;End&gt;&gt;</p>
      </tbody>
    </table>
  </div>
</body>
</html>

Nani

Somehow, it is getting like this when I previewed the Email and even in the real email, when I inserted the above code @SkrOYC

SkrOYC

Show us the real one, the email generated, not the preview. I find the preview stuff quite useless.
Also post a screenshot/s of the Task config

Nani

This is how I am getting the real email. Moreover, earlier I used to get related column values in the table

SkrOYC

Discard using the html code inside the "Email Body" section for now, I also found that it presented issues for other user.

Please try making an .html file and using the file instead of writting the code directly in the editor

Nani

Can any one of you help me the issue @Suvrutt_Gurjar @Koichi_Tsuji @dbaum @Marc_Dillon @SkrOYC @Kabuliño @Una_AppSheet

SkrOYC

@lizlynch For no reason this started to happen. Using the right HTML code ended with issues, not rendering the content as expected. This is not the first user I saw having the same problem

lizlynch

@Nani @SkrOYC - Apologies for the inconvenience.

In this article: https://support.google.com/appsheet/answer/11449723

We provide the following guidance:

If there is a large gap between the email preheader and the email body text, try the following:

Set all page margins to 0.
Set the Page Setup to A4

Can you try this to see if it works to address your issues? Otherwise, I can check with the AppSheet dev team. Though, I suspect the best plan would be to contact Support for assistance so they can potentially gain access to your app to help troubleshoot.

Liz

Gmail Rendering Issue: Excessive Space Before Table in Email Body, when using a HTML Code