Allow 100% width

[cyberwombat]

Nice work on these btw..

So I am playing with the #develop branch and here's an issue I ran into. My email is designed in sections that have a background color that extends 100%. I limit inner tables to 600. However there is no way to allow 100% on the boilerplate as setting the fixed width option to false still causes a max-width of 600 to occur. Not sure what the best solution is but though that I would mention my use case.

[jamesmacwhite]

Hi,

Thanks for the feedback!

Would it be a case of if TABLE_CONTAINER_FIXED_WIDTH is false, a max-width AND a width of 100% should be applied to the container-wrapper table? So as an example:

<table id="main-wrapper" style="min-width: 100%; table-layout: fixed;" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td id="main-cell" align="center" valign="top">
            <table id="container-wrapper" style="max-width: 600px;" width="100%" border="0" cellpadding="0" cellspacing="0">
                 <!-- Rest of boileplate stuff -->
            </table>
        </td>
    </tr>
</table>

[cyberwombat]

In my case I have set things up so that I am not modifying the boilerplate after generation besides inserting 1) content, 2) custom css, 3) some EJS functions - so that I can keep getting your updates painlessly. Additionally because my content is actually EJS stuff I have many alternating rows (gray, white) in which I bound the 600. So having the option to not have the boilerplate set any max width is ideal. What I am doing now is setting a max-width: 100%;width: 100% which causes my own inliner to override the boilerplate code so that works but would be nice to have less tweaking off the bat. What would happen if you just set the css like this:

table#/* @echo TABLE_CONTAINER_CSS_ID */ {
  width: TABLE_CONTAINER_WIDTH; // so 600px or 100%
  /* @endif */
  /* @if TABLE_CONTAINER_MAX_WIDTH */
  max-width: TABLE_CONTAINER_MAX_WIDTH;
  /* @endif */
}

I am not sure of all use cases though.... But I see things like this:

1. 600px should not shrink
2. 600px should shrink
3. 100% shrinkable

[cyberwombat]

Maybe something like this...

table#/* @echo TABLE_CONTAINER_CSS_ID */ {
  /* @if TABLE_CONTAINER_FIXED_WIDTH='true' */
  width: TABLE_CONTAINER_WIDTH; /* This is to workaround a bug inline-css */
  /* @endif */
  /* @if TABLE_CONTAINER_FIXED_WIDTH='false' */
  width: 100%;
  max-width: TABLE_CONTAINER_WIDTH;
  /* @endif */
}

Would have to pass a 'px' or '%' in the constant of course.

[jamesmacwhite]

Thanks for that, that's really useful. I'll review this and see if I can implement it into the code directly.

[jamesmacwhite]

OK, reviewing this, I don't see any reason why it cannot work. I assume you are OK with the MSO wrapper, because this needs to be present when TABLE_CONTAINER_FIXED_WIDTH is false to stop Outlook clients making the email super wide due to lack of max-width support.

I didn't actually realise I had hard coded the max-width within the CSS, so thanks for spotting this!

[jamesmacwhite]

Fix 8754bc8 is now on develop. I'm making some final changes before pushing this to master because I've recently messed around with the original custom config setup, so minimising breaking vars for others!

[jamesmacwhite]

@cyberwombat Just as a general FYI. Further to the fixes when using a flexible width container made a while ago, I recently added a new config ENABLE_TABLE_CONTAINER, set this to false and the entire container table is removed, leaving you with just the main wrapper table, allowing you to place your width: 100% tables with backgrounds and then your own max-width 600px or similar layout.