Ticket body rendering the HTML tags differently

[Rinu]

We are working on and Helpdesk request all where working fine except ticket body html is rendering differently in the email (outlook) and the ticket (in sharepoint).

Please see the details below

For outlook

As you can see there is a huge space between the "Purpose" and the table .

Please see the code below

Request for new Hardware

<strong>Requested For: </strong>my name
<strong>RFS Number: </strong>project number
<strong>Project Name: </strong>OVERHEAD - INFRASTRUCTURE
<strong>Division: </strong>IT
<strong>Delivery Location: </strong>location
<strong>Purpose: </strong>test
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="width: 300px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt;  background: #D9D9D9; text-align: center;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Hardware</span></p>
        </td>
        <td style="width: 300px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt;  background: #D9D9D9; text-align: center;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Model</span></p>
        </td>
        <td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt;  background: #D9D9D9; text-align: center;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">QTY</span></p>
        </td>
        <td style="width: 200px;  border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt;  background: #D9D9D9; text-align: center;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Price</span></p>
        </td>
        <td style="width: 200px;  border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt;  background: #D9D9D9; text-align: center;">
           <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">Total</span></p>
        </td>
    </tr>

  <tr>
        <td style="width: 300px; border-left: solid windowtext 1.0pt;  text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Engineering Desktop</span></p>
        </td>
        <td style="width: 300px; border-left: none;  text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Dell Precision Tower 3630</span></p>
        </td>
        <td style="width: 200px;  text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">3</span></p>
        </td>
        <td style="width: 200px;  text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">503.00  </span></p>
        </td>
        <td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; ">
           <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">1509</span></p>
        </td>
    </tr>  <tr>
        <td style="width: 300px; border-left: solid windowtext 1.0pt;  text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">BIM-Spec Desktop</span></p>
        </td>
        <td style="width: 300px; border-left: none;  text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
            <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Dell Precision Workstation 3630 Mini Tower</span></p>
        </td>
        <td style="width: 200px;  text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">1</span></p>
        </td>
        <td style="width: 200px;  text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
           <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">765.00  </span></p>
        </td>
        <td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; ">
           <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">765</span></p>
        </td>
    </tr></table>
For the list of Hardware please see <a href="">click here</a>.

and this is how it shows on SharePoint.

[Evgeniy]

Hello! The huge space between the "Purpose" and the table is kept on the ticket in SharePoint. So, is the issue about the styling of the table (no borders, background colours, different text-aligning)?

[Rinu]

Hi Evseychik,

I triggered an email from the flow using "Send an email (V2) action" it renders as expected without the huge space between the purpose and the table (please see the image below from outlook).

The space only appears when creating the ticket gets created.

The html i posted on the original post is collected from a flow that is already ran and yes the styling also gets disappeared on SharePoint but it shows fine in the ticket email on the outlook.

[Evgeniy]

Thank you for clarifying. I have contacted developers to research the issue. Could you also specify what is about this picture? You said that it is from Outlook, but the huge space persists there too:

[Rinu]

this is the ticket notification email sent by plumsail after creating the ticket using .

below is the notification mail sent from "Send an email (V2) action""

both screen shots are from outlook.

[Evgeniy]

Thanks, now it is clear for me.

[Evgeniy]

Hello! I have consulted with developers and it turned out that the support of HTML is very restricted, if fact, it is expected that the field with comment body will contain a plain text. The huge spaces you mentioned are multiple line breaks (<br />) that were added by the engine instead of new lines of the original HTML. So for now, you can avoid them with the workaround below, but the styles will still be missed. We will fix it, but I can't say now when exactly. The issue will be discussed on the next week and I will provide you with clearer data.

And the workaround for removing the line breaks. In your flow, you have to process the HTML before passing it as a comment body.

1. Here is some HTML:

2. Assign it as a value to a string value:

3. Initialize another value and assign to it a decoded new line character:
   decodeUriComponent('%0A')

4. In the comment body, use another expression to replace all new lines in the HTML by empty strings:
   replace(variables('HTML'), variables('NewLine'), '')

[Rinu]

Thank you for the reply looking forward for the fix.

[Evgeniy]

Hello! Please update HelpDesk to the latest version (2.1.10) and clear browser cache. After that, inline styles will begin working. Regarding styles specified in the <head> element, we will fix it later. No due dates for now.