Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

wrong formatting on clients

See original GitHub issue

Hi,

Thank you for heml ! Email html is problematic and your work will certainly help a lot of people !

I am trying to use heml for formatting https://my-netdata.io (https://github.com/firehol/netdata) HTML emails.

I found a few formatting discrepancies among email clients, so I thought I should let you know.

The key problem is MS Office Outlook (check below). All the others are just imperfections.

Keep in mind I just found heml today, so please be gentle if I did it the wrong way.

Click to see my heml file

<heml>
  <head>
    <subject>badhost needs attention - inbound packets dropped ratio - net_packets.eth0</subject>
    <style>
      body { background: White; }
      h1 { color: Black; }
    </style>
  </head>
  <body>
    <container style="background: #eeeeee; padding: 0.5em;">
      <container style="background: White; color: Black; padding: 0;">
        <container style="background: #dddddd; color: Black; padding-left: 0.5em;  padding-right: 0.5em; width: calc(100% - 1em);">
          <p align="right">netdata alarm notification</p>
        </container>
        <container style="background: Orange; color: White; padding-left: 0.5em;  padding-right: 0.5em;  width: calc(100% - 1em);">
          <h2 align="center">
          badhost needs attention
          </h2>
        </container>
        <container style="background: White; color: Black; padding: 0.5em;   width: calc(100% - 1em);">
          <container style="padding: 0;">
            <h3>
              inbound packets dropped ratio = 0.14%
            </h3>
            <p>
              the ratio of inbound dropped packets vs the total number of received packets of the network interface, during the last 10 minutes
            </p>
            <container>
              <row>&nbsp;</row>
              <row>
                <column large="6" small="6">net_packets.eth0</column>
                <column>eth0</column>
                <column>WARNING</column>
              </row>
              <row  style="color: grey; font-size: 0.7em;">
                <column large="6" small="6">chart</column>
                <column>family</column>
                <column>severity</column>
              </row>
              <row>&nbsp;</row>
              <row>
                <column large="12" small="12">Sun Oct 29 12:19:16 EET 2017</column>
              </row>
              <row  style="color: grey; font-size: 0.7em;">
                <column large="12" small="12">date</column>
              </row>
            </container>
            <container>
              <button href="https://registry.my-netdata.io/goto-host-from-alarm.html?host=badhost&chart=net_packets.eth0&family=eth0&alarm=inbound_packets_dropped_ratio&alarm_unique_id=1499830026&alarm_id=1499800300&alarm_event_id=2047">view netdata dashboard</button>
            </container>
            <container style="font-size: 0.83em; color: grey;">
            &nbsp;
            </container>
            <hr style="color: lightgrey;" />
              <p align="center"  style="font-size: 0.7em; line-height: 1.3em; color: grey;">
              The source of this alarm is line <code>37@/etc/netdata/health.d/net.conf</code>
              <br/>
              (alarms are configurable, edit this file to adapt the alarm to your needs)
              <br/>&nbsp;<br/>
              Sent by netdata, the real-time performance and health monitoring,
              <br/>
              running on <code>box</code>.
              </p>
          </container>
        </container>
      </container>
    </container>
    <container>
      <marquee>badhost has 4 critical and 2 warning alarms 💌</marquee>
    </container>
  </body>
</heml>

heml editor

This is what the heml editor shows:

gmail

Perfect. Marquee does not roll, but it shows up nicely.

screenshot from 2017-10-29 14-23-09

outlook (MS Office Professional Plus 2016)

The main problems are:

sizing of containers is inaccurate (note the white space on the sides of the orange container)
tables, buttons and marquee fonts have been reset to Times and black.
line-height seems to be ignored.