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

AppSheet AppSheet Q&A
, , ,
1
![Screenshot (139).jpg|1360x613](upload://4rVb5Lxve1SUKT4IZxq1s4D3swv.jpeg)

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

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

<>

IR Serial Number Quantity RA Mode of Payment
<> <> <> <> <>
2

Can you help me with the issue SkrOYC

3

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

4

Check your PreHeader

5

Appsheet Email Issue 1.png
Appsheet Email Issue 1.png1920×403 24.4 KB

Appsheet Email Issue 2.png
Appsheet Email Issue 2.png855×787 22.8 KB

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

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

<>

IR Serial Number Quantity RA Mode of Payment
<> <> <> <> <>
6

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

7

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.

8 
<!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><<Start: [Related 5.1. TR]>></p>
        <tr>
          <td style="border: 1px solid black; text-align: center;"><<[IR]>></td>
          <td style="border: 1px solid black; text-align: center;"><<[Serial Number]>></td>
          <td style="border: 1px solid black; text-align: center;"><<[Quantity]>></td>
          <td style="border: 1px solid black; text-align: center;"><<[RA]>></td>
          <td style="border: 1px solid black; text-align: center;"><<[Mode of Payment]>></td>
        </tr>
        <p><<End>></p>
      </tbody>
    </table>
  </div>
</body>
</html>
9

Appsheet Email Issue 3.1.png
Appsheet Email Issue 3.1.png1918×930 27.1 KB

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

10

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

11

Appsheet HTML Issue 1.PNG
Appsheet HTML Issue 1.PNG609×545 11.9 KB

Appsheet HTML Issue 2.PNG
Appsheet HTML Issue 2.PNG323×506 20.7 KB

Appsheet HTML Issue 3.PNG
Appsheet HTML Issue 3.PNG320×522 23.8 KB

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

12

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

13

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

14

@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

1 Like
15

@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:

  1. Set all page margins to 0.
  2. 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

1 Like
16

Hi,

I know this subject is closed, but I tried the proposed solution and it doesn’t work.

I found a solution it’s strange, but it works.

When you are creating your table with code, instead of writing the code like this:

Name Company Checkin Time
<> <> <>

Put the code like that:

<> <>
Name Company Checkin Time
<> <> <>

It’s working, and the best way to put the code like that is to copy and paste it into the ‘Email Body Template’. This will format the code, and then you can copy and paste the code again from this field into the body. That should work perfectly.

1 Like