Percent based width

[gempir]

I'm trying to implement 2 buttons that are on the same row and will each fill 50% of the row.

Changing the toPx like this, and changing propTypes

    if (typeof (value) === "string" && (value.endsWith("px") || value.endsWith("%"))) {

allows me to also use % as prop, but Outlook doesn't like that at all with the VML buttons. Is there any way to get the VML Buttons to work with percent?

[jacksontrieu]

@gempir this might be possible using the mso-width-percent VML property:
https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds/

You would have to update thecalculateVmlRectStyles function to conditionally output width or mso-width-percent based on the value provided. Something like this:

calculateVmlRectStyles() {
  const stylesHash = {
    'height': toPx(this.props.height),
    'v-text-anchor': 'middle',
  };

  if (widthIsPercentage(this.props.width) { // You would need to implement the widthIsPercentage function
    stylesHash['mso-percent-width'] = this.props.width;
  }
  else {
    stylesHash['width'] = this.props.width;
  }

  return hashToStyles(stylesHash);
  }

Feel free to open a PR if you can get this to work :)