Section full-width not working

[srocerer]

How to add full-width support? Now working when importing mjml code MJML preview : [full-width](https://mjml.io/try-it-live/components/section)

[SwithFr]

Hi,

I have the same issue

[DRoet]

Could you provide the mjml code that is suppose to be working?

[lahdekorpi]

<mjml>
  <mj-body>
    <mj-section background-color="#f0f0f0" full-width="full-width">
      <mj-column>
        <mj-text>Look ma' I'm full width!
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#333">
      <mj-column>
        <mj-text color="white">I'm not :(
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

https://mjml.io/try-it-live/H1h78Aynw

[lahdekorpi]

I'd like to add this feature. I tested by adding a new trait to mj-section for full-width as a dropdown and it does produce correct mjml markup that is even correctly rendered in the final HTML output, but not in the preview. Haven't had a closer look at how this renders the elements, any ideas where to go from here, @DRoet ? Thanks

[DRoet]

@lahdekorpi I'm not quite sure exactly as I don't have time to look into it.

But it could happen because sometimes we wrap the components before we send them into the mjml2html() converter, for example: https://github.com/artf/grapesjs-mjml/blob/master/src/components/Column.js#L84

Or maybe there is an mistake in displaying the returned html correctly, since we strip out the parts that we need.

[lahdekorpi]

@DRoet Thanks for the info and spending your time on this! No worries, I can take a shot at this.

Did I understand the structure correctly here;

1. each component is being separately rendered using mjml
2. but before that they are wrapped into <mjml><mj-body></mj-body></mjml>
3. a query selector (like div > table > tbody > tr > td > div in Column) is then used against the HTML output generated by mjml to get the actual HTML for the preview?

Sorry if this is the wrong place for this, but just trying to understand the overall architecture here before doing more pull requests.
This structure would also mean why certain styles under mj-attributes are only working on the output but not the preview.

[DRoet]

Yes you are correct, that's how it's structured.

[TechBill]

full-width still not working in section or am I missing something?

[artf]

https://github.com/GrapesJS/mjml/pull/304