Equal height columns within a group

[tpetry]

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:

[kmcb777]

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

[tpetry]

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.

[Cool-and-Deadly]

Any news on this? I am having the same problem as described by @tpetry with dynamically content from a database.

[NEALON]

I have the same problem.

[brunocfalcao]

me too, would love to see this resolved in the next version

[addisontaylor]

Already thought this would be implemented. Hopefully, it's added in a new release!

[iRyusa]

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.

[jakemcallister]

This would be so useful!

[iameduardod]

@iRyusa @DRoet any updates?

[sanazmemar]

I have the same problem. Is there any update on it? @iRyusa @DRoet

[samueljim]

Bump this

[azyskowski]

bump

[ajay47]

@iRyusa Are there any updates on this issue ?

[GurovDmitriy]

@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 ...

[iRyusa]

We're not currently working on this

[shestakov-vladyslav]

• desired feature

[lucswart]

Bump

[webuxr]

Desired feature +1

[witalijx]

+1

[automatyzuj]

+1

[bekdauletarynbek]

desired feature please add this

[kamilus67]

Yes this is very desired feature. I need this! :)

[karrabl4st]

This is a desired feature!

[imcodingideas]

Update on this?

[kehers]

Update?

[JackBailey]

Still a desired feature, it's simple to do with a html table but it'd be nice to have it directly in MJML

[CTownsdin]

Bump for a desired feature.

[cebreus]

Any update?

[EvilaMany]

+1

[cbrooks86]

Add me to the list of folks struggling with this issue.

[ethunk]

I am also running into this issue.

[gwinnem]

@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 ...

I' gladly help you, im working on my own dnd html email editor with mjml

[Voltra]

Bump for a desired feature

[ggeorgiev4]

Bump

[ilker-sahin]

Bump

[webuxr]

I bumped this back in April 2022 (over 2 years ago now). I’m bumping again as I still use MJML in our production email system AND I still have a need for auto-height columns in a group.

Any chance this feature will make it into v5?

Also, is there a roadmap where we can see what’s being worked on next or what improvements are being made?

Thanks again for making such an awesome email templating framework!

Cheers!

[iRyusa]

This is not something i'm working on, as there's no real way to support this with current implem.

You can just use a table layout if you really need this in a single column but it won't be responsive.

There's no roadmap or what's so ever because I'm currently the only one to work on this project, and my time is very limited.

On Fri, May 3, 2024 at 4:25 PM Ryan R. Smith @.***> wrote:

I bumped this back in April 2022 https://github.com/mjmlio/mjml/issues/1582#issuecomment-1111426475 (over 2 years ago now). I’m bumping again as I still use MJML in our production email system AND I still have a need for auto-height columns in a group.

Any chance this feature will make it into v5?

Also, is there a roadmap where we can see what’s being worked on next or what improvements are being made?

Thanks again for making such an awesome email templating framework!

Cheers!

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

[PoiterMe]

  <mj-head>
    <mj-attributes>
      <mj-text font-family="Helvetica, Arial" color="black" />
      <mj-class name="red" color="red" />
    </mj-attributes>
    <mj-style>
       .eq-height{ height: 110px;
      vertical-align: top; }
    </mj-style>
  </mj-head>

<mj-section>
        <mj-column
          padding="0"
          width="48%"
          background-color="#F7EEE3"
          padding-right="5px"
        >
          <mj-text
            font-size="16px"
            css-class="eq-height"
            vertical-align="top"
            align="left"
            >as asas asas <br />dasdasd</mj-text
          >
        </mj-column>
        <mj-column background-color="#FFFFFF" width="2%">
          <mj-raw> &nbsp; </mj-raw>
        </mj-column>
        <mj-column width="48%" background-color="#8a1d36" padding-left="5px">
          <mj-text
            line-height="1.2"
            font-size="16px"
            css-class="eq-height"
            color="white"
            align="left"
            >asdasdasd</mj-text
          >
        </mj-column>
      </mj-section>

[cadeyrn]

Of course you can set a fixed height, but in the vast majority of cases, this is not a solution, as the height is unknown.