search

GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
638 stars 228 forks source link

mj-hero max-width issue #231

Open rcloss opened 3 years ago

rcloss commented 3 years ago

Inside the generate mj-hero HTML that gets generated is a div with a max-width of 600px, is there any way I can change that? I'd like mj-hero's background image to stretch wider if the container is bigger than 600px, I would've thought that would be tied to the mj-body, or just been auto/100%

rcloss commented 3 years ago

Any ideas? Otherwise anyone have a custom mj-hero block they've built that can be wider than 600px?

rcloss commented 3 years ago

I did some digging and it appears as if it's setting it to "containerWidth" which I'd have thought would be the width of mj-body, but even if I set mj-body to 800px or something first, it still has a max-width of 600px. It seems to be pulling it from "this.context" in the mjml-browser module any idea if we can override that at a higher level in grapesjs without monkeying with the source modules?

mistergraphx commented 3 years ago

hi,

i encouter the same issue with the mj-wrapper too, like you the only solution i've found is to modify the default width in node_modules/mjml-browser/lib/mjml-browser.js.

mistergraphx commented 3 years ago

upgrading mjml browser to the latest build, and adding default attributes with mj-attributes, seems to fix this behavior for me.

<mj-attributes>
  <mj-body width="900px"/>
  <mj-section padding="0" width="900px"/>
  <mj-wrapper padding="0" width="900px"/>
</mj-attributes>
rcloss commented 3 years ago

hmm, I might need to update my grapesjs-mjml plugin as well, I tried rebuilding which I assume will rebuild with the newest browser and it still doesn't work properly. Unfortuantely I can't use the latest because of some other bugs that will hopefully be fixed with the next release