Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tricky situation when using class + style + templating #1698

Closed
kud opened this issue Sep 2, 2019 · 1 comment

Comments

@kud
Copy link

commented Sep 2, 2019

First of all, I know it's all my fault as I use mjml in a particular way, but I'd like to know if we could find a compromise.

Describe the bug
mjml doesn't calculate well the final style when using some tricky code like django templates.

To Reproduce

<mj-text>
      <div class="ProgressBar">
        <# @TODO: there's a bug with mjml when you use class + style + django templating #>
        <div style="height: 100%; background: #328DC7; width: {% widthratio amendments_left_to_discuss_count amendments_count 100 %}%;"></div>
      </div>
</mj-text>

<mj-style inline="inline">
.ProgressBar {
  margin: 30px 0;
  height: 9px;
  background: #e1f3ff;
  border-radius: 10px;
  overflow: hidden;
}

.ProgressBar-element {
  height: 100%;
  background: #328dc7;
}
</mj-style>

Expected behavior
What I've got:

<div class="ProgressBar-element" style="height: 100%; background: #328dc7; width: {% widthratio amendments_left_to_discuss_count amendments_count 100 %;"></div>

What I should have:

<div class="ProgressBar-element" style="height: 100%; background: #328dc7; width: {% widthratio amendments_left_to_discuss_count amendments_count 100 %}%;"></div>

the difference is here: 100 %;" vs 100 %}%;

MJML environment (please complete the following information):

  • OS: [e.g. MacOS]: 10.14.6
  • MJML Version [e.g. 4.2.0]: 4.4.1
  • MJML tool used [e.g MJML App]: "gulp-mjml": "4.0.2",
@kud

This comment has been minimized.

Copy link
Author

commented Sep 2, 2019

@kmcb777 told me:

When using <mj-style inline="inline"> the css will be inlined using the juice library. As a side effect, juice will convert all tags' attributes into lower case. If you need to preserve some cases (i.e. for a templating lib) you can specify the tags to preserve. With the example above, all tags of the form <# myVar="" > or </# myVar="" > will be left untouched. By default juice already ignores <% EJS %> and {{ HBS }} tags.

so the solution is to avoid any thing with logic code. Just use display tags like {{ myVar }} when putting in style.

so:

      <div class="ProgressBar">
        {% widthratio amendments_left_to_discuss_count amendments_count 100 as amendments_left_to_discuss_count_width %}
        <div class="ProgressBar-element" style="width: {{ amendments_left_to_discuss_count_width }}%;"></div>
      </div>

Done.

@kud kud closed this Sep 2, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.