Mjml: [Feature request] Need a wrapper to wrap single or multiple <mj-section> inside

[jitendravyas]

There is a need of a wrapper to wrap multiple <mj-section> so we can give a style to wrapper like border-radius, box-shadow, border-color, background, padding etc.

For example in below code I want to wrap some sections in a wrapper

Like this

But it's not possible currently with MJML. I tried doing that by wrapping <mj-sections> in <mj-raw> but that also didn't work https://github.com/mjmlio/mjml/issues/252

There could a component called <mj-wrapper> or <mj-inner-container> to provide this functionality.

[ngarnier]

Hello @jitendravyas, thanks for submitting this feature.

I see two major things here:

• a wrapper
• new attributes (border-radius, box-shadow, border-color...)

Unfortunately, such a feature would lead to issues because of the inconsistent and bad support of the listed attributes among popular email clients, which defeats the purpose of MJML. Therefore, we won't be able to implement this.

Anyway, keep up the good work and thanks again for your feedback!

[jitendravyas]

I didn't get you

such a feature would lead to issues because of the inconsistent and bad support of the listed attributes among popular email clients

If any client doesn't support any CSS property it will just ignore it and client which supports can use it.

[ngarnier]

Indeed, but MJML users must be able to use styling attributes with confidence and expect them to render as expected in the supported email clients.

Here, box-shadow for example is supported by only a small minority. People might think it's generally supported as it's available as a mjml attribute while it's not, and may be deceived.

[g0ddish]

@ngarnier Why not mark attributes as not supported by all clients in the documentation, there is a lot of fallback cases in email clients. Shouldn't it be at least optional so people don't have to edit rendered html and add them afterwards?

[ngarnier]

Hey @g0ddish, we don't want to fall into a situation where we just have a list of CSS attributes that might or might not be supported and where the users have to check for each attribute if it's generally supported. Of course, we're willing to do this if the attribute is not supported on just very few clients, but not if it's generally not supported (which happens to be the case here).

The value of MJML is to provide a very easy-to-use yet efficient framework for responsive email, doing this would side-track us from this path.

Hope it makes sense to you and happy to gather your feedback!

[jitendravyas]

I'm not sure how this would side-track MJML team from the path as @g0ddish mentioned

there is a lot of fallback cases in email clients

one way could be to allow adding custom css using style=""

[g0ddish]

@ngarnier I see where you are coming from. How do you feel about @jitendravyas idea of allowing arbitrary styles on elements?

[jitendravyas]

Some email clients also supports animation https://www.emailonacid.com/blog/article/email-development/css-animations-part-1

[jitendravyas]

Foundation for Email has custom wrapper tag for this purpose

[iRyusa]

@g0ddish allowing custom "style" on any mj-element is ambiguous. A MJML element can render from a small render tree eg a td+div to a complex thing such as column/section.

[jitendravyas]

Even just allowing a similar component like mj-section with same properties but nested functionality will help a lot, for now.

Also, I don't see any big problem with allowing things like border-radius, shadow, I can help in documentation to make a compatibility table for properties.

[jitendravyas]

For custom properties like box-shadow, it could be useful to have an option to add custom attributes in the same you user can create a new component.

[jitendravyas]

Why this was closed?

[f4f343w4tcfwv4tz5tb5]

I think we could use a flag of some sort in the config file like allowLowSupportAttributes="YES" that would then allow for things like what's being discussed above

[iRyusa]

Reopening this, it will need some work but having a background applied on multiple section is totally needed.

Only tricks today to do this is to do a section with column element stacking, but it doesn't work on outlook

[dalefish]

Agree it's needed.

I got it to work yesterday with adding a couple of ghost rows in post, not
the cleanest workflow but it did the job in time for the campaign to be
sent.

:----------------------------:
Dale McConnell

On 31 August 2016 at 10:12, Maxime Brazeilles [email protected]
wrote:

Reopening this, it will need some work but having a background applied on
multiple section is totally needed.

Only tricks today to do this is to do a section with column element
stacking, but it doesn't work on outlook

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/255#issuecomment-243705533, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLOEVAirjQi-4DF4etVc9UlK_kqoc_ks5qlUWIgaJpZM4Iephu
.

[ngarnier]

hello @jitendravyas, we're introducing mj-wrapper in v3.3.0 (now in beta). Feedback welcome!

Example of implementation: https://mjml.io/try-it-live/HJ_-IOv_g

[ngarnier]

A long-time requested feature finally out with MJML v3.3.0! Thanks for submitting @jitendravyas, it's a great addition to the set of MJML components.

To install: npm install mjml