Mjml: Suggestion: configurable alignment for divider

[zauni]

Hey MJML Team,
first of all: thanks for this awesome framework :) Really great job!

And now the problem: I want to have a 80px wide divider left aligned, which is not possible today. Would it be a good idea to let the margin attribute be configurable? like this

<mj-divider margin="0" width="80" />

Or could you guide me to the right direction on how to extend the mj-divider component with my own component which has this attribute? I already tried to extend the Divider class and overwrite the getStyles method, but didn't work out as expected. Now I just copied the Divider class and put the margin attribute on it, but this is not so nice solution.

And if I want to make a pull request for the original divider class, what's the best way to support "margin" and "margin-(left|right|top|bottom" attributes at the same time? Is there a utility method for this kind of stuff?

Thanks for your help!

[ngarnier]

Hey @zauni,

Thanks for the feedback and for reporting this issue! Here are 2 workarounds to achieve what you want:

1. Add some padding to force the divider to go left, using padding-right
2. Use columns and insert the divider in the left column of your section

Regarding pull-requests to add support for new attributes, here is an example of a similar contribution that could help you: https://github.com/mjmlio/mjml/pull/298 (but here, I don't think we should add margin as there is padding already).

[zauni]

Hi @ngarnier,
thanks for the reply and your 2 suggestions. The first workaround is unfortunately not a good solution on smaller screens (< 600px) because a horizontal scrollbar appears.

example:

<mj-divider border-color="blue" border-width="3px" width="80px" padding-right="495px" />

with the following code it is working okay on desktop, but not perfect on mobile (just 32px wide on 320px screen width):

<mj-divider border-color="blue" border-width="3px" width="100%" padding-right="82%" />

The column workaround has almost the same problems with the percentage widths, but it is 100% wide on smaller screens.

So maybe an option to switch off the auto margins wouldn't be so bad? :)

[ngarnier]

Regarding the columns technique, it works if you have a multicolumn layout, you have to use mj-group (https://mjml.io/documentation/#mjml-group) to prevent the columns from stacking on mobile.

The easiest would be for you to show us what you want to achieve so we can see if there's an easy workaround!

We'll explore the auto margins, in the meantime let met know if it helps!

[zauni]

@ngarnier okay, with the group tag it's better, but also too narrow an small screens:

<mj-section background-color="#fff">
    <mj-group>
        <mj-column width="22%">
            <mj-divider border-color="blue" border-width="3px" padding="0 25px" />
        </mj-column>
        <mj-column width="78%">

        </mj-column>
    </mj-group>
</mj-section>

In the meantime I use my own component, which is a copy of the original divider with just the margin turned off. I would make a pull-request, but I have a bug in Outlook 2013 where the divider is centered, even with margin: 0;... 🐛 So I have to investigate a bit more.

[iRyusa]

Hi there @zauni

Can you provide a quick screenshot of what you want to achieve with this ? I'll take a look at it

[zauni]

Hi @iRyusa, here is the screen:

My copy of the divider is resetting the margin on the <p> and changes the align attribute to "left" on the wrapping <table>.

[iRyusa]

I see ! I'll take a look at it ! Thanks for the screenshot

[blaugueux]

👍 for just resetting the margin and changing the parent table align

[afewremarks]

@zauni did you get your component working? I am trying to do the exact same thing.

[zauni]

@afewremarks I made a gist of my version of the divider. But beware that this worked for v3.0.2 of MJML, I don't know if it is working in the newest MJML version. Basically it was a copy of the original divider with small additions.
https://gist.github.com/zauni/037782cf3b75037320e6b72b5b1ef6b2

[afewremarks]

@zauni thanks for sharing this. I was having a bit of trouble getting it working...Any way I found a native way to do it if you need it or anyone else does. I just created a column group one with a 10% width and one with a 90%. Added a text element with a background color. then you just have to play with the heights and paddings a little:

<mj-section padding-left="25px" padding-bottom="10" padding-top="0" > <mj-group> <mj-column width="10%" padding-top="0" padding-bottom="0" background-color="#005393"> <mj-text height="5px" padding-top="0" padding-bottom="0"></mj-text> </mj-column> <mj-column width="90%" padding-top="0" padding-bottom="0" background-color="#fff"> </mj-column> </mj-group> </mj-section>

[vielhuber]

This does not work inside a column.

Simply use an empty mj-button:

<mj-button
    border-bottom="1px solid red"
    align="left"
    width="90px"
></mj-button>

[heyflo]

I guess we could just have an align attribute on the mj-divider component. So that the generated <p> used as a divider could be either aligned to the left, center or right. As of right now, I'm using the button component to solve my problems :

<mj-button padding="0" inner-padding="0" align="left" width="70px" height="3px" background-color="#009fe3"></mj-button>

Here I just wanted a divider, below my section title, aligned to the left, with a width of 70px & an height of 3px. Feels like killing a fly with a truck 😅, but it's working!

[bastienrobert]

I think the simplest way to align left is:

<mj-divider mj-class="divider" css-class="divider"/>

<mj-class name="divider" width="40px" margin="0"/>



md5-a7d929c2dabcf3eba6679c3c1750f882



.divider {
  display: inline-block;
}

EDIT: This solution is working only if your divider is in a column in a section.

[dakur]

I've just ran across this issue as well.