mjml icon indicating copy to clipboard operation
mjml copied to clipboard

Column styles

Open kickbk opened this issue 6 years ago • 1 comments

With the new version of grapesjs-mjml, I no longer am able to control the padding of the column components. There is a fixed 10px top and bottom with style: 'pointer-events: all;' + (clmPadd ? padding: ${clmPadd}; : ''), so I want to remove the default and add the ability to control it with styles manager.

I am adding 'padding', 'padding-top', 'padding-bottom' to the stylable attributes of the component, but it's not having any effect. Why not?

Could someone please suggest how to do this?

UPDATE:

I was able to get it to work, but I don't like how I am doing it. The MJML component has very few styles loaded for the div element. In mjml-column index.js line 94 it returns the div element with

...
return {
        div: {
          'font-size': '0px',
          'text-align': 'left',
          direction: this.getAttribute('direction'),
          display: 'inline-block',
          'vertical-align': this.getAttribute('vertical-align'),
          width: this.getMobileWidth()
        },
...

I added the padding and other properties to it and enabled styling in grapesjs-mjml Column component with stylable and it now works... But this is not a good solution as I'm changing to original MJML component.

Could anyone suggest a better way?

kickbk avatar Aug 26 '19 08:08 kickbk

I'm not entirely sure what you want to accomplish, could you provide a better example ?

DRoet avatar Jul 17 '20 18:07 DRoet