Progress Bar Module to Display Right-to-Left | Community
Skip to main content
kagill16
kagill16
Level 2
January 16, 2019
Question

Progress Bar Module to Display Right-to-Left

  • January 16, 2019
  • 2 replies
  • 3333 views

In our emails we have a progress bar module, but cannot get it to display right-to-left for Arabic and Hebrew. We are using velocity script to display copy in the correct direction based on segmentation for languages. Below is the code being used in the module. Any ideas?

<tr class="mktoModule" id="Progress_Bar" mktoname="C11 Progress Bar" dir="{{my.DIR}}">
                        <td bgcolor="${emailBodyColor}" style="padding: 0px 20px; background-color: ${emailBodyColor}; border-left: 1px solid #e2e1e1; border-right: 1px solid #e2e1e1;">
                            <table class="progressBarTable" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="${emailBackgroundColor}" style="width: 100% !important; background-color: ${emailBackgroundColor};">
                                <tr>
                              
                                    <td width="${progressBar}%" bgcolor="${progressBarColor}" style="background-color: ${progressBarColor}; width: ${progressBar}%; align:{{my.TextAlign}};">
                                    </td>
                                    <td></td>
                                </tr>
                            </table>
                        </td>
             </tr>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
January 16, 2019

Really need to see the rendered code in the Inbox, not only the module code.

Is this a question of "works in browser, but doesn't work after downsampling HTML by email client"? Or "doesn't work even in HTML view"?

Can you also please highlight your HTML using the Advanced Editor's syntax highlighter, so it's readable?

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

kagill16
kagill16Author
Level 2
January 16, 2019

Thank you, Sanford! I was wondering how to paste the code in there.

I cannot get it to display right-to-left in Outlook. If I put a <div> around the inner <td> tags then it will display from right-to-left on mobile and if I view online.

Here is how the progress bar displays in Outlook:

The desired effect is for Arabic and Hebrew for it to flip right-to-left. Hope this helps!

Dave_Roberts
Dave_Roberts
Level 10
January 18, 2019

You might try moving the direction attribute onto another element than the <tr> -- my gut tells me it ought to go on the table w/ class of "progressBarTable" instead. I've also used the CSS rule-set for direction alongside/in-place-of the direction attribute, so something like direction: rtl; could go into the style="" attribute on that same table after the width and background-color rules.

    Terms & ConditionsAccessibility statement

    Loading footer...