Fixed the unclickable area in MSO-PC for the buttons

[fernamp]

Notes for the previous Issue #359 fixed here, following the discussion at Issue #2565

In getStyles.td:

Removed the mso-padding-alt as inner padding cause is no longer needed when the size of the button is controlled by the padding in the anchor. If I keep the MSO-attribute, the button will be shown as twice the size in MSO-PC.

in getStyles.content:

Removed the mso-padding-alt: 0px cause is nullifying the effect of activating the anchor as a button in MSO-PC. The padding in the anchor is now effectively creating the internal size of the button.

Added border:

1px solid which activates a "bug" in MSO-PC, forcing MSO to read the display attribute of the button (default: inline-block) and thus, changing the behavior of the anchor in MSO to act like a common anchor in all the other readers/browsers.

To avoid non-corresponding colours between the background of the container TD and the border created in the anchor, I added the this.getAttribute('background-color') property to the style, aligning both colours, minimizing the unwilling mismatching.

Results in MSO-PC

Tested in EoA:

Tested in Litmus

[iRyusa]

Thanks for this PR it might be the greatest improve on button compatibility this far. I'll try to get some time this month to get this tested and merged 🎉

[jonybekov]

When it'll be merged?

[cricketnest]

Any updates on this? When it will be merged?

[manuelmeurer]

I would also love to see this merged and released! 😸 Happy to help with testing or anything else that needs doing.

[iRyusa]

Sorry for the wait I'd like to release in it's own version ! Can you fix the lint issue @fernamp ? Thanks !

[fernamp]

Updated. Sorry for the delay. I missed the last message!

[iRyusa]

It's totally me here PR is open for wayyy too long. I'm trying to get this merge next week thanks a lot for the update ! <3

[fernamp]

Mmm I will try to fix that again, but is kind of weird that everything works but linter doesn't like the concatenation. Someone can help and say if there is a better way to write that concatenation beside the variable? border: this.getAttribute('background-color') + ' 1px solid',

Should I create a var to get the background color and then concatenate the 1px solid? or what? I'm not a 100% programmer so I'm aware I may be asking or doing something stupid. Help much appreciated.

[iRyusa]

border: `${this.getAttribute('background-color')} 1px solid`,

Should satisfy the linter here 👍

[fernamp]

I'll test it! Thanks!

[hymair]

Can this be merged?

[ketys-from-meiro]

wen?

[alexfoxy]

Can we get this merged??

[timmyrosen]

Would be great if this could be merged

[Plonq]

It's been a while, can someone else just fix the lint issue?

[renchris]

What is holding this PR from being merged? Is there anything the community can further assist with to push this through? Kindly looking forward to the merge, @iRyusa @fernamp

[iRyusa]

After some testing it look like multiline button behave weird with this tech. Need some more testing on my side to see what's happening :/

On Sat, Feb 10, 2024 at 12:13 AM renchris @.***> wrote:

What is holding this PR from being merged? Is there anything the community can further assist with to push this through? Kindly looking forward to the merge, @iRyusa https://github.com/iRyusa @fernamp https://github.com/fernamp

— Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/pull/2591#issuecomment-1936724202, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELHTPZVQ5PMESBY7AOD3DYS2UP7AVCNFSM6AAAAAASR4STZWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWG4ZDIMRQGI . You are receiving this because you were mentioned.Message ID: @.***>

[renchris]

This worked for me changing the display: inline-block to display: block as Outlook on macOS and Chrome browser had the button not fully clickable until that change.

MJML

<mj-raw>
  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; max-width: 600px; margin: 0 auto;">
    <tr>
      <td align="center" bgcolor="#3B71FE" role="presentation" style="border-radius: 25px; cursor: pointer; background-color: #3B71FE;" valign="middle">
        <a href="https://www.google.com" style="display: block; padding: 10px 25px; border-radius: 25px; background-color: #3B71FE; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; text-decoration: none; line-height: 180%;" target="_blank"> Start Registration </a>
      </td>
    </tr>
  </table>
</mj-raw>

HTML

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; max-width: 600px; margin: 0 auto;">
  <tr>
    <td align="center" bgcolor="#3B71FE" role="presentation" style="border-radius: 25px; cursor: pointer; background-color: #3B71FE;" valign="middle">
      <a href="https://www.google.com" style="display: block; padding: 10px 25px; border-radius: 25px; background-color: #3B71FE; color: #ffffff; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; text-decoration: none; line-height: 180%;" target="_blank"> Start Registration </a>
    </td>
  </tr>
</table>

I used MJML v4.15.2 with the terminal command mjml -r mjml-input-template.mjml -o html-output-template.html instead of the MJML desktop app which just uses MJML v4.12.0