Menu icon Foundation
Spacers in Outlook

I have been having quite a time with Outlook 2016 and random gaps, in this case shown up spectacularly bu the facy that by background is black

You can clearly see the gap as a line and whats more there is a spacer under those callout  boxes.

Missing out some other items my root is a container not a wrapper and I make the body and table.body black otherwise the code in question is this:

    <wrapper class="secondary bg white">
       <spacer size="16"></spacer>
        <row>
            <columns small="12">
                <p class="text-center">You have made a great decision to switch your energy account
                    to Just Energy, thank you. This email includes some important information about setting up your
                    account as well as a copy of your Agreement with us.</p>
            </columns>
        </row>
        <row>
            <columns large="6">
                <callout class="secondary">
                    <h5 class="bbporange">Your Account Number</h5><p style="Margin: 0;">$AccountNumber</p>
                </callout>
            </columns>
            <columns large="6">
                <callout class="secondary">
                    <h5 class="bbporange">Your Consumer Number</h5><p style="Margin: 0;">$ConsumerNumber</p>
                </callout>
            </columns>
        </row>
      <spacer size="16"></spacer>
    </wrapper>

This results in the unwanted black line. I believe its because the spacer produces a td filled with the nonbreaking space &#xA0; and we all know what Outlook thinks of things like that.em.

In the componentFactory.js in the spacer section starting line 124 I changed All I did was make it 

    // <spacer>
    case this.components.spacer:
      var classes = ['spacer'];
      var size;
      var html = '';
      if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));

      }
      if (element.attr('size-sm') || element.attr('size-lg')) {
        if (element.attr('size-sm')) {
          size = (element.attr('size-sm'));
          html += '<table class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
        }
        if (element.attr('size-lg')) {
          size = (element.attr('size-lg'));
          html += '<table class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
        }
      } else {
        size = (element.attr('size')) || 16;
        html += '<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
      }

And the problem seems to be fixed. Indeed all my oddly small spacers have grown to the right size in Outlook as a result

It would be nice to see this in the repo so I dont lose it!

I would be curious to know if there are any rules governing the order of containers / wrappers / and then rows

 

 

 

spacerOutlook

I have been having quite a time with Outlook 2016 and random gaps, in this case shown up spectacularly bu the facy that by background is black

You can clearly see the gap as a line and whats more there is a spacer under those callout  boxes.

Missing out some other items my root is a container not a wrapper and I make the body and table.body black otherwise the code in question is this:

    <wrapper class="secondary bg white">
       <spacer size="16"></spacer>
        <row>
            <columns small="12">
                <p class="text-center">You have made a great decision to switch your energy account
                    to Just Energy, thank you. This email includes some important information about setting up your
                    account as well as a copy of your Agreement with us.</p>
            </columns>
        </row>
        <row>
            <columns large="6">
                <callout class="secondary">
                    <h5 class="bbporange">Your Account Number</h5><p style="Margin: 0;">$AccountNumber</p>
                </callout>
            </columns>
            <columns large="6">
                <callout class="secondary">
                    <h5 class="bbporange">Your Consumer Number</h5><p style="Margin: 0;">$ConsumerNumber</p>
                </callout>
            </columns>
        </row>
      <spacer size="16"></spacer>
    </wrapper>

This results in the unwanted black line. I believe its because the spacer produces a td filled with the nonbreaking space &#xA0; and we all know what Outlook thinks of things like that.em.

In the componentFactory.js in the spacer section starting line 124 I changed All I did was make it 

    // <spacer>
    case this.components.spacer:
      var classes = ['spacer'];
      var size;
      var html = '';
      if (element.attr('class')) {
        classes = classes.concat(element.attr('class').split(' '));

      }
      if (element.attr('size-sm') || element.attr('size-lg')) {
        if (element.attr('size-sm')) {
          size = (element.attr('size-sm'));
          html += '<table class="%s hide-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
        }
        if (element.attr('size-lg')) {
          size = (element.attr('size-lg'));
          html += '<table class="%s show-for-large"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
        }
      } else {
        size = (element.attr('size')) || 16;
        html += '<table class="%s"><tbody><tr><td height="'+size+'px" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>';
      }

And the problem seems to be fixed. Indeed all my oddly small spacers have grown to the right size in Outlook as a result

It would be nice to see this in the repo so I dont lose it!

I would be curious to know if there are any rules governing the order of containers / wrappers / and then rows

 

 

 

Julian Warren over 2 years ago

This may have been a visit down an incorrect path although I'm sure it would do no harm. This has been superceded by my post "Rows and spacers = Outlook Trouble" on the same subject.  The final fix is similar.

kopamam over 2 years ago

After his triumph over Dimitrov, Nadal said:

 

federervsnadallive-stream.us