mjml
mjml copied to clipboard
mjmlio
Equal height columns within a group
Problem description
A common problem in email design (and web) design is to have content of the same height standing side by side. Content should be responsive in mails, but the mj-group tag allows you to prevent stacking if certain content should really be displayed side by side.
This is a simple example of what we want to achieve:
There are many variations of this requirement, but in the end it is always about making two columns (mj-column) the same height for different aspects of styling (background colors, background images, common alignment lines, ...).
Possibilities to solve it currently Currently, the problem can only be solved by assigning the same fixed height to each column. This is feasible for one-time mailings created by a programmer/designer, but it's a very complex thing because the slightest text change requires new height values. Additionally it is not guaranteed that the height specification will work everywhere because the different operating systems render fonts slightly different and therefore different line breaks and text heights could occur.
The approach does not work at all with dynamically generated mails consisting of e.g. contents from a database.
Highlighting the current technical state The following MJML code creates the following mail with columns not of the same height:
<mjml>
<mj-body background-color="#2980b9" width="610px">
<mj-section background-color="#3498db" padding="5px">
<mj-group>
<mj-column background-color="#c0392b" width="50%">
<mj-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</mj-text>
</mj-column>
<mj-column background-color="#e67e22" width="50%">
<mj-text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</mj-text>
</mj-column>
</mj-group>
</mj-section>
</mj-body>
</mjml>
Why automatic columns of the same height are currently not possible
Currently, mjml-column tags are rendered in the same way whether they are in a section or group. This happens because an AST is created based on the markup and each tag renders itself and only inserts the markup of the rendered child nodes in the correct places.
The resulting markup looks something like this:
<div mjml-group>
<outlook-table>
<outlook-row>
[for every column in group]
<outlook-colum width="together 100%">
<div mjml-column width="together 100%" />
</outlook-colum>
[/for every column in group]
</outlook-row>
<outlook-table>
</div>
In contrast to sections the columns do not stack because they are assigned a fixed width which together results in 100% width. The generated markup is absolutely useful because a column is always rendered the same way and only the parent (section or group) controls the width differently.
A common height is not possible because divs in a div (or table column) cannot be instructed to have the same height.
Possible solution to the problem The group renderer will not just render its markup and let the mjml-column renderer create the content. The Group Renderer will do the rendering of itself and its columns and will only handover rendering the contents of the columns to these child components.
Thus it is possible to create new markup for columns in a group and to render groups and columns simply as a table. It would look something like this:
<table mjml-group>
<tr>
[for every column in group]
<td background color and images applied here width="together 100%">
<markup to implement features like padding etc>
<child renders inserting the real content here>
</markup>
</td>
[/for every column in group]
</tr>
</table>
Addendum
This feature is not only limited to people using the mjml markup language. It's not possible to do it in mailjets visual builder too which is based on mjml:
Interesting, equal-height columns are always a problem because of responsiveness, but in a mj-group it may be possible to do something. Might not be an easy one though
The markup will be really easy and i will not expect any problems with client as you can use plain old HTML 1.0 tables. But i was not able yet to build a PoC because i didn't succeed in changing the markup generation of the mjml group renderer.
Any news on this? I am having the same problem as described by @tpetry with dynamically content from a database.
Already thought this would be implemented. Hopefully, it's added in a new release!
Yeah we would like to do so for mobile only, but it's a bit hard to tweak current group+column code to have this working without breaking everything else. Maybe this could be implemented in a custom comp for now and merge it into both group/column if we can.
@iRyusa Есть ли обновления по этому поводу?
I have been working with vue-style structured mjml assembly on gulp for a long time. And I just collect used components for myself. It's easier to write such things yourself. If someone volunteered to do the work together, then we could register some nice custom components ...
Still a desired feature, it's simple to do with a html table but it'd be nice to have it directly in MJML
