Css Style Not Working with Emailer

Hi guys,

So I am making an app to send an email the issue i’m having is that when I get it to create a new line it appears to make three i’m using a Samsung S5 to test with and I get my first line of information then three empty lines then my second line of information. I posted this before but was told to try css with the html, so I’ve tried to implement it into my code and my email on my device is reading as normal text information rather than a css style. Anyone know were i’m going wrong?

[lua]

local function OnbtnSend( event )

– compose an HTML email with two attachments

local options =

{

  to = { “MobileDevelopmentTesting@gmail.com” },

  subject = “Incident Report”,

  isBodyHtml = true,

body = [[<html>

<head>

        <style>

              p { margin-bottom: 5px; padding-bottom: 0px; }

          </style>

          </head>

         

  <body>

       <p>Incident Date: ]] … myData.dateDay … " / " … myData.dateMonth … " / " … myData.dateYear … [[</p>

       <p>Incident Time: ]] … myData.timeHour … " : " … myData.timeMinute … [[</p>

       <p>Did the Incident Cause Harm?: ]] … myData.IRb1 … [[</p>

       <p>Who Was Affected By or At Risk By the Incident?: ]] … myData.IRb2 … [[</p>

       <p>Where Did the Incident Take Place?: ]] … myData.incidentLocation … [[</p>

       <p>Severity of Harm or Damage Caused: ]] … myData.IRb3 … [[</p>

       <p>Indicated Part of the Body Affected: ]] … myData.injuryOccurred … [[</p>

       <p>What Caused the Incident?: ]] … myData.IRb4 … [[</p>

       <p>If Caused By Height, Distance Of Fall?: ]] … myData.fallHeight … [[</p>

       <p>If Other, Description of Selection?: ]] … myData.textOther … [[</p>

       <p>Brief Description: ]] … myData.breifDes … [[</p>

       <p>Medical Intervention: ]] … myData.IRb5 … [[</p>

       <p>What Was the Outcome?: ]] … myData.IRb6 … [[</p>

       <p>Immediate Action Taken: ]] … myData.actionTaken … [[</p>

       <p>Person(s) Affected By the Incident (Name): ]] … myData.nameAffected … [[</p>

       <p>Person(s) Affected By the Incident (Email): ]] … myData.affectedEmail … [[</p>

       <p>Person(s) Affected By the Incident (Phone): ]] … myData.affectedPhone … [[</p>

       <p>Person(s) Affected By the Incident (Student Info): ]] … myData.studentSchool … [[</p>

       <p>Person(s) Affected By the Incident (Staff Info): ]] … myData.staffDepartment … [[</p>

       <p>Person(s) Affected By the Incident (Staff Line Mgr): ]] … myData.lineManagersName … [[</p>

       <p>Witnesses to the Incident:(Name): ]] … myData.witnessName … [[</p>

       <p>Witnesses to the Incident:(Email): ]] … myData.witnessEmail … [[</p>

       <p>Witnesses to the Incident:(Phone): ]] … myData.witnessPhone … [[</p>

       <p>Witnesses to the Incident:(Student Info): ]] … myData.witnessStudentSchool … [[</p>

       <p>Witnesses to the Incident:(Staff Info): ]] … myData.witnessStaffDepartment … [[</p>

       <p>Person Reporting the Incident:(Name): ]] … myData.reportingName … [[</p>

       <p>Person Reporting the Incident:(Email): ]] … myData.reportingEmail … [[</p>

       <p>Person Reporting the Incident:(Phone): ]] … myData.reportingPhone … [[</p>

       <p>Person Reporting the Incident:(Student Info): ]] … myData.reportingStudentSchool … [[</p>

       <p>Person Reporting the Incident:(Staff Info): ]] … myData.reportingStaffDepartment … [[</p>

   </body>

</html>]] }

local result = native.showPopup(“mail”, options)

if not result then

print( “Mail Not supported/setup on this device” )

native.showAlert( “Warning!”,

“ERROR: Mail not supported/setup on this device. Contact Support”, { “OK” }

);

end

– NOTE: options table (and all child properties) are optional

end

[/lua]

Thanks again,

Matt.

Can you try and apply some other styles to the p tag?  perhaps:

  p { font-weight: bold; color: #f00; }

and see if it shows up in bold-red text?  You can also try moving the whole style block inside the body, but there’s no reason it shouldn’t work in the head tag.  What device are you testing this on?

Rob

Hi Rob,

No this simple provides the same result.

Thanks again,

Matt.

I’d still like to know what device you’re testing this on.

But it looks like you need to switch out the paragraph tags in favor of break tags.  Leave the first <p> and the last </p>.  Remove all <p> in between and change all </p> to <br /> tags on the end of each line.  You should end up with:

<p>first line<br />

second line<br />

 … etc.

last line</p>

I don’t know why it’s not picking up the styles, which is why I asked for what device you’re testing on.

Rob

Can you try and apply some other styles to the p tag?  perhaps:

  p { font-weight: bold; color: #f00; }

and see if it shows up in bold-red text?  You can also try moving the whole style block inside the body, but there’s no reason it shouldn’t work in the head tag.  What device are you testing this on?

Rob

Hi Rob,

No this simple provides the same result.

Thanks again,

Matt.

I’d still like to know what device you’re testing this on.

But it looks like you need to switch out the paragraph tags in favor of break tags.  Leave the first <p> and the last </p>.  Remove all <p> in between and change all </p> to <br /> tags on the end of each line.  You should end up with:

<p>first line<br />

second line<br />

 … etc.

last line</p>

I don’t know why it’s not picking up the styles, which is why I asked for what device you’re testing on.

Rob