Column styles
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?
I'm not entirely sure what you want to accomplish, could you provide a better example ?