how to make MJML elements display inline-block

Question

I'm new to mjml and I'm trying to find out if there is a way to make <mj-text> elements to display inline-block without using <mj-style> or inline css.

I have an <mj-text> which renders dynamically-generated text - so I have no way to foresee its width. I would like this container's background to end where the text ends and not fill the entire page's width (like block elements do).

Here is and example of the template I'm trying to render:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text align="left" container-background-color="#c3e16d" color="#60b7f1" font-size="14px">
          <span>Dynamically Generated Text</span>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

After some searching I did manage to get it to work using an <mj-style> block - but what I'm trying to figure out if there is a more proper way to do it using the mjml api.

score 7 · Accepted Answer · answered Sep 04 '18 at 08:03

7

The way you did it is perfectly fine. You could also simply use inline styles on the span tag, like this.

As the span tag is made for this type of need and does it well already, we didn't implement anything to replace that in MJML.

answered Sep 04 '18 at 08:03

Nicolas Garnier

370
1
10

1

In my case I need to have a button beside a text, I'd appreciate your help – gsalgadotoledo Oct 02 '19 at 05:13
Just use 2 columns, add your text in the first column and your button in the second column. – Nicolas Garnier Oct 03 '19 at 10:41
1

@NicolasGarnier What id you're already in a column? MJML doesn't supported nested columns. – Chris Haines Nov 27 '19 at 10:37
Indeed, in that case you'll need to use a custom HTML table. – Nicolas Garnier Nov 29 '19 at 17:25

how to make MJML elements display inline-block

1 Answers1