Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG: A border on the mj-column is shown twice in the editor

See original GitHub issue

What browser are you using?

Chrome 102.0.5005.61

Reproducible demo link

https://codepen.io/adiux/pen/BaYrEXR?editors=1111

Describe the bug

How to reproduce the bug?

Add grapesjs-mjml to the project with any version newer than 0.5.6
Add a border to a section. E.g.: <mj-column border="4px solid #F45E43">
Open MJML template with grapesjs

What is the expected behavior? only one border is shown:

What is the current behavior? two borders are shown:

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// Working
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.5.6";

// Not working
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.5.7";
import grapesjsMjml from "https://cdn.skypack.dev/grapesjs-mjml@0.6.0";

Note: The rendered HTML is fine. It is only an issue with the view in the editor.

Issue Analytics

State:
Created a year ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

gustavohlealcommented, Jun 14, 2022

I thought i have found a solution, but it cause bugs to other attributes.

0reactions

gustavohlealcommented, Jun 14, 2022

Even before #270 the border was added to the table inside the div. With the solution of adding the styles to the div the border is being added to both of them. This is whats causing this bug. I’m not finding where this is passed to the inner element. But when you change the padding of the column the element is rendered again and the problem is fixed. Something in the builtin property of border is causing this. Border-radius is also passed to the table and not rendered.