0

enter image description hereI have an email alert where a VF email template is used. and one VF component is used in the email template

I'm facing alignment problem in Outlook desktop version but not in outlook web version .

The Vf component use only simple html no css. Please help why this error is comming

Following is the smaple html code used in vf component. output is result is in the attchment

                <tr>
                    <td><b>REF ID: </b></td><td><apex:outputText value="{!ReqTracker[0].Name}"></apex:outputText></td>
                </tr><BR/>

                <tr>
                    <td><b>CSE Cancellation Reason: </b></td><td><apex:outputText value="{!ReqTracker[0].Cancellation_Reason__c}"></apex:outputText></td>
                </tr><BR/>

                <tr>
                    <td><b>Request Type: </b></td><td><apex:outputText value="{!ReqTracker[0].Type__c}"></apex:outputText> </td>
                </tr>
  • Hello, have you tried to specify alignment with css? – ytiq Nov 28 '16 at 7:57
  • 1
    Remove the <br/> between the <tr> as that IIRC is not well formed HTML. If you want to add spacing between rows as a margin or lineheight vis css – Eric Nov 28 '16 at 8:47
  • Thanks Eric, It worked Could you please explain what's IIRC ? – Dibyaranjan Sahoo Nov 30 '16 at 6:12
0

As the commenter above said, you should remove the extra <BR /> between the <tr> rows.

Here's what you should have:

<table>
  <tr>
    <td><b>REF ID: </b></td>
    <td><apex:outputText value="{!ReqTracker[0].Name}"></apex:outputText></td>
  </tr>
  <tr>
    <td><b>CSE Cancellation Reason: </b></td>
    <td><apex:outputText value="{!ReqTracker[0].Cancellation_Reason__c}"></apex:outputText></td>
  </tr>
  <tr>
    <td><b>Request Type:</b></td>
    <td><apex:outputText value="{!ReqTracker[0].Type__c}"></apex:outputText></td>
  </tr>
</table>

Bonus points: for cleanliness you could remove the bold tags and use a <th> instead which is default for a header cell and bold by default. Although it's also centered by default so you'd have to set the text-align to left using css like so: https://jsfiddle.net/5kgas2fq/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.