search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
16.91k stars 952 forks source link

Gutter between columns / body #160

Closed EmmanuelBeziat closed 6 years ago

EmmanuelBeziat commented 8 years ago

Hi there,

I do need to have columns separated by some spaces. At this point I don't know how to achieve this…

Thanks for any help.

iRyusa commented 8 years ago

Hello @EmmanuelBeziat

Column doesn't support padding, you can just add the same padding on every element inside your column like this:

<mj-column>
  <mj-text padding="0 20px">...</mj-text>
  <mj-anything padding="0 20px">...</mj-anything>
</mj-column>
<mj-column>
  <mj-text padding="0 20px">...</mj-text>
  <mj-anything padding="0 20px">...</mj-anything>
</mj-column>
EmmanuelBeziat commented 8 years ago

Hello,

Nope, this won't work for what I need here — really spaces between columns, not inside. Here's a scheme :

So at this point, each column contains two <mj-text>and one <mj-image />. Each <mj-text> have some padding on them already, and they only work "inside". In this case, i'm stucked because I have a need to have 3 columns with a visible gap between them. Needless to say, those columns must be responsive.

I was only able to achieve this by… Not using MJML for all this portion of the mail. This scheme is used 2 times in it, so basically using MJML was almost pointless for this project, I ended up with something like this : 

<mj-body>
  <mj-section>
    <mj-column>
      <mj-raw>
        <!-- some nasty, old, heavy, handwrited html -->
      </mj-raw>
    </mj-column>
  </mj-section>
    <mj-column>
      <mj-raw>
        <!-- some nasty, old, heavy, handwrited html -->
      </mj-raw>
    </mj-column>
  </mj-section>
</mj-body>

Moreover, it forced me to add some classes and CSS to handle responsiveness of this handwrited html, so each time I compiled using MJML, I was forced to add some CSS in the output version, because I couldn't do it inside the MJML template.

I had a dozen of mailing to do since the beginning of 2016, and most of them had some "plain-color" columns like this that need a gutter. This is why I think this would be really, really important to improve this system of columns, allowing some gap (maybe with an attribute ?) that would add some blank cells between actual ones.

Thanks for your help anyway :)

MikeMuxika commented 8 years ago

Hey @EmmanuelBeziat, a temporary solution could be adding an empty column set to the specific width you need in between but this will probably result in strangely sized columns if you leave them at the default 100% width. <mj-column background-color="#FFFFFF" width="Xpx"></mj-column

screen shot 2016-04-01 at 1 48 55 pm
pixelize commented 8 years ago

+1 @EmmanuelBeziat I totally agree with you, would be awesome if we can put gutters between cols to space them out.

For now I use a dirty trick which is working fine:

`

  
</mj-column>`
iRyusa commented 8 years ago

Related to #204

iRyusa commented 7 years ago

Just a quick update on the issue here, we have found a solution for it, but it will require some refactor on how mj-image behave.

So we add a table/tbody/tr/td that will wrap the mj-column and add padding on td.

As of today mj-image just take the size of a column, and with gutter support, an image should take column size - padding left+right - gutter left/right.

But we need to solve the issue with mj-image's width first cf #263

iRyusa commented 7 years ago

Brace yourselves, gutter are coming in MJML4 !

xjrcode commented 7 years ago

On 3.X you can make a border of the same color as the background and add some width.

For example if you have an mj-sectionwith white background you can do this:

<mj-column border="10px solid #fff">...</mj-column>

ngarnier commented 6 years ago

Gutters are available in the latest beta of MJML 4, install it with npm install mjml@next.

Here is how to reproduce the layout above (you can obviously adjust paddings to get the exact same result): 

<mjml>
    <mj-body>
        <mj-section background-color="#D5D5D5" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="10px">
            <mj-column padding="10px" > 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Which will produce this:

EmmanuelBeziat commented 6 years ago

@ngarnier Awesome! Thanks a lot, this will be very useful.

nicmare commented 3 years ago

wow was wondering how to reduce the gutter between two columns. then i found the answer of setting padding-left="0" to the child element like mj-text. why not just adding this to the docs? thanks

iRyusa commented 3 years ago

Docs display default attribute value already on all elements, we can't do a CSS tutorial for each property here.

nicmare commented 3 years ago

its not about each property. its only about gutter width. the space between two columns. only topic i found it this https://documentation.mjml.io/#column-sizing but no words how to change gutter width or reduce it. this works for me now: https://github.com/mjmlio/mjml/issues/160#issuecomment-202781216

Sambuxc commented 1 year ago

I'm running into an issue here when I'm using a border on the columns.

I have added a border to each of the columns and the padding does not work as expected. Borders should sit between the margin and padding: [margin] [border] [padding] [content]. It looks like mjml does not implement it in this way and puts the order as [margin] [padding] [border] [content].

<mjml>
    <mj-body>
        <mj-section background-color="#D5D5D5" background-repeat="no-repeat" text-align="center" vertical-align="top" padding="10px">
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
            <mj-column padding="10px" border="1px solid #05C3DE"> 
                <mj-image src="https://puu.sh/z9hcM/b54d0b6d6a.png" padding="0" />
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

Issue created - https://github.com/mjmlio/mjml/issues/2693

iRyusa commented 1 year ago

Yep as MJML tag doesn't produce a single tag it's a bit counter intuitive as it doesn't follow the box model.

Use inner-border for this case.

Sambuxc commented 1 year ago

Thanks! For reason, I had to specify padding on the column to get the border to show, even if the value was set to 0px. Without the padding, the border would not show.