<hr> not expanding full width (special case)

[iamsankalp]

The following code inside a will give only a half width 'hr' separator. As soon as you write anything with <hr> like   it'll be full width.
How can we reproduce this bug?

<row>
      <columns>
        <hr>
      </columns>
</row>

What did you expect to happen?
Expand full width

What happened instead?
Only expands to half columns width.

What email clients does this happen in?
Tested in browser so far

[cossssmin]

I can confirm this to be happening in Outlook 2013, and web Gmail (Chrome).

Looking at the source code, this happens when you have the <hr> row after a row of two columns. It's set to display: table-cell and it spans just one cell width (if it were to have colspan defined, it would work, but that's not ideal).

Also, this is the markup you end up with, based on the example given by @iamsankalp above:

<table class="row collapse" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
  <tbody>
    <tr style="padding:0;text-align:left;vertical-align:top">
      <hr style="Margin:15px auto;clear:both;font-size:1px;height:1px;line-height:1px;">
    </tr>
  </tbody>
</table>

... which is invalid markup, because there is a missing <td> that needs to wrap the <hr />

[rafibomb]

Might have to do with the .expander that is right after the <hr>. Can you remove it and let us know if it solves this? If so we can build this into Inky

[iamsankalp]

@hellocosmin Thanks for jumping in.
@rafibomb Yup, removing the whole <th class="expander"> fixes it. Just checked.

[rafibomb]

Ok, so looking at how <hr>'s behave, it seems like the only time this is happening is when a set of row's and columns surround the <hr>. There may be a way in Inky to eliminate the .expander for this case.

For now, using an <hr> without a nested row and column seems to work well.

Case tested - working as expected

<container>
  <row>
    <columns small="12">
      <hr>
      <h1 class="text-center">{{title}}</h1>
    </columns>
  </row>

[rafibomb]

Similar issue here with buttons: #415

[iamsankalp]

Just in case, someone needs - this is what i'm using until a permanent fix

      <row>
        <columns>
          <p class="hr-fix">&nbsp;</p>
          <hr>
        </columns>
      </row>

.hr-fix{
  line-height: 0px !important;
}

[axelson]

Is this fixed by foundation/inky#29 ?

[cossssmin]

@axelson yes it is, using it in production.

[axelson]

Then this should be marked as closed right?

[rafibomb]

We'd like to close this - if it's resolved out of the box. Using the no-expander attribute is a workaround but not a solution in my mind. Can anyone confirm it's resolved?