full-width="full-width" not working for section or wrapper

[TechBill]

The attribute full-width doesn't seem to work for wrapper and section mjml components.

MJML try it live show it to be part of the attribute for section and wrapper

https://mjml.io/try-it-live/components/section

[ronaldohoch]

@TechBill, have you discovered anything?

[TechBill]

@ronaldohoch It works just that editor doesn't render it probably.

We have to add it in then send a test email to ourselves or convert to HTML to confirm that it's working.

[ronaldohoch]

@DRoet can you help us with it?

[ronaldohoch]

WE DID IT!!
Asap we will open a PR to it!
https://www.loom.com/share/be13b096764045099b9b8fcdedd9b34c

[lechuhuuha]

WE DID IT!! Asap we will open a PR to it! https://www.loom.com/share/be13b096764045099b9b8fcdedd9b34c

hi any update on PR. The editor still not render corretly althogh send mail work

[TechBill]

Been a year since I reported it .... I would be interested in the update as well too

[gustavohleal]

Oh yeah... I solved with @ronaldohoch and was going to open the PR but forgot. Sorry guys. Will do it this afternoon (in brazilian time)

[lechuhuuha]

Oh yeah... I solved with @ronaldohoch and was going to open the PR but forgot. Sorry guys. Will do it this afternoon (in brazilian time)

thanks man its would help us a lot

[gustavohleal]

Just opened the PR. I would like to advise that this make the section and wrapper elements full width when selected. But is just the selection, the content and background still going to respect the 600px width limit when full-width is not selected. Once its selected than the background color or image will extend to the whole canvas.
The problem was that when full-width is added the MJML engine would change the structure of the elements and the function getChildrenContainer()from grapes components would return the wrong query to get the childrens container. But also mj-body element add a div with max-width, so i removed this max-width when the body is rendered.

[lechuhuuha]

Just opened the PR. I would like to advise that this make the section and wrapper elements full width when selected. But is just the selection, the content and background still going to respect the 600px width limit when full-width is not selected. Once its selected than the background color or image will extend to the whole canvas. The problem was that when full-width is added the MJML engine would change the structure of the elements and the function getChildrenContainer()from grapes components would return the wrong query to get the childrens container. But also mj-body element add a div with max-width, so i removed this max-width when the body is rendered.

thanks you very much for the fix. Mind if i ask one more question. Have you face this issues in this link some time i see the attribute added in style manager or trait manager and then the editor just strip out attribute or not render correctly

[DRoet]

Fixed in v1.0.3

[lechuhuuha]

Just opened the PR. I would like to advise that this make the section and wrapper elements full width when selected. But is just the selection, the content and background still going to respect the 600px width limit when full-width is not selected. Once its selected than the background color or image will extend to the whole canvas. The problem was that when full-width is added the MJML engine would change the structure of the elements and the function getChildrenContainer()from grapes components would return the wrong query to get the childrens container. But also mj-body element add a div with max-width, so i removed this max-width when the body is rendered.

Hello. I see other bug is when you set backgroud-image on component wrapper and then set full-width on wrapper the editor did not render correctly
You can test on the lastest version of this repo to see the bug

Expected behavior :

The result:

Did you encounter this issue before ?

Thanks

[lechuhuuha]

Just opened the PR. I would like to advise that this make the section and wrapper elements full width when selected. But is just the selection, the content and background still going to respect the 600px width limit when full-width is not selected. Once its selected than the background color or image will extend to the whole canvas. The problem was that when full-width is added the MJML engine would change the structure of the elements and the function getChildrenContainer()from grapes components would return the wrong query to get the childrens container. But also mj-body element add a div with max-width, so i removed this max-width when the body is rendered.

Hello. I see other bug is when you set backgroud-image on component wrapper and then set full-width on wrapper the editor did not render correctly You can test on the lastest version of this repo to see the bug

Expected behavior :

The result:

Did you encounter this issue before ?

Thanks

Ok i manage to find where its got wrong

When you use full-width with background-url mjml will render another div so the children selector not get its right
Change Wrapper.ts from this

      getChildrenSelector() {
        if (this.model.getAttributes()['full-width']) {
          return 'table > tbody > tr > td > div > table > tbody > tr > td';
        } else
          return 'table > tbody > tr > td';
      },

To this

      getChildrenSelector() {
        if (this.model.getAttributes()['full-width'] && this.model.getAttributes()['background-url']) {
          return 'table > tbody > tr > td > div > div > table > tbody > tr > td';
        } else if (this.model.getAttributes()['full-width']) {
          return 'table > tbody > tr > td > div > table > tbody > tr > td';

        }
        else
          return 'table > tbody > tr > td';
      },

So the editor will render correctly

So far i dont see any side effect

Hope this help someone.

[DRoet]

@lechuhuuha feel free to open a PR so I can merge the fix