# Builder hides elements that are visible in the preview

**URL:** <https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159>\
**Category:** Product Support\
**Created:** [March 5, 2024, 11:28am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159 "2024-03-05T11:28:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 5, 2024, 11:28am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/1 "2024-03-05T11:28:23Z")

</div>

**Your software**  
My Mautic version is: 5.0.3  
My PHP version is: 8.1.27  
My Database type and version is: mariadb Ver 15.1 Distrib 10.6.16-MariaDB, for debian-linux-gnu (x86\_64) using EditLine wrapper

**Your problem**  
My problem is:

1. Create an email using the builder.
2. Fill in mj-text designated elements.
3. Add photo.
4. Save, close the builder.
5. Open builder again, bottom mj-text elemens are now hidden.
6. Click preview, it’s all visible in the preview.

See below for screenshots and code.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/b/b3df6b1414d567d6e89ace0dd29bd7dbbacc227e.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/e/ea737c60c66064733b2481f17204bc1900b3af49.png)

Email theme: email.mjml.twig

```auto
<mjml>
  <mj-body>
		<mj-section data-section-wrapper="1">
			<mj-column width="600px" data-slot-container="1">
					<!-- Company Header -->
					<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
						<mj-raw>
							<div>
								Hi {contactfield=firstname},
								<br>This is the SF STYLE email template.
								<br>
								<br>{signature}
								<br>
								<br>
							</div>
						<mj-raw>
					</mj-text>
					<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
						<mj-raw>
						PHOTO
						</mj-raw>
					</mj-text>
					<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
						<mj-raw>
						SIGNATURE
						</mj-raw>
					</mj-text>
					<mj-text color="#838383" font-size="12px" padding="8px" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" >
						{unsubscribe_text}
					</mj-text>
					<mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
						<mj-raw>
						<hr/>
						</mj-raw>
					</mj-text>
			</mj-column>
		</mj-section>
  </mj-body>
</mjml>

```

These errors are showing in the log:

Steps I have tried to fix the problem:

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 5, 2024, 11:37am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/2 "2024-03-05T11:37:01Z")

</div>

Code from the builder:

```auto
<mjml>
  <mj-body>
    <mj-section data-section-wrapper="1">
      <mj-column width="600px" data-slot-container="1">
        <!-- Company Header -->
        <mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
			...
        </mj-text>
        <mj-image src="https://m.example.com/media/images/img_0411_cropped_med_cropped.png" align="left" id="iv4sv" width="100px"/>
        <mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
          <mj-raw>
            PHOTO
          </mj-raw>
        </mj-text>
        <mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
          <p>Jakob
            <br>Tel: 070 721 07 37
            <br>linkedin.com/in/jakobpersson
          </p>
        </mj-text>
        <mj-text color="#838383" font-size="12px" padding="8px" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
          {unsubscribe_text}
        </mj-text>
        <mj-text padding="8px" font-size="18px" line-height="150%" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
          <mj-raw>
            <hr>
          </mj-raw>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

```

It would appear that the `mj-image` tag breaks the builder. Removing the image solves the problem.

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 5, 2024, 11:43am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/3 "2024-03-05T11:43:55Z")

</div>

The issue seems specific to themes written in MJML – or my theme specifically. I cannot reproduce it using Blank, for example.

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 5, 2024, 11:49am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/4 "2024-03-05T11:49:54Z")

</div>

I used a responsive variant of Blank I’ve made and the builder now works. The `mj-image` component does not cause the builder to fail rendering subsequent components.

---

<div class="post-metadata">

**Author:** ![marcus42](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@marcus42](https://forum.mautic.org/u/marcus42)\
**Post date:** [March 6, 2024, 2:42pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/5 "2024-03-06T14:42:27Z")

</div>

Those problems are WYSIWYG problems and not really Mautic.

It was like that +25yrs ago. And it is still a thing today (don’t hold your breath while waiting for a fix).

Most “Drag & Drop” gui are bloating the code when adding/removing items.

This will eventually bring some unwanted side effects as you described.

The fix:  
You’ll need to manually clean-up the code in order to restore a proper email template

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 6, 2024, 3:07pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/6 "2024-03-06T15:07:58Z")

</div>

It’s not in CKEditor, it’s in GrapesJS. The problem seems to be with the `mj-image` block/tag and rendering it in the builder. I recreated the same template using HTML and it works. I suspect it’s because the MJML renderer isn’t complete yet.

---

<div class="post-metadata">

**Author:** ![marcus42](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@marcus42](https://forum.mautic.org/u/marcus42)\
**Post date:** [March 6, 2024, 3:17pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/7 "2024-03-06T15:17:47Z")

</div>

That’s pretty much my understanding of a wysiwig.

Works fine - until you have conflicting code where it won’t execute the same from within the editor, the web or the email.

Clean up your code and those “missing” elements that are overlapping in the editor will show up.

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [March 6, 2024, 3:19pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/8 "2024-03-06T15:19:04Z")

</div>

The `mj-image` block was added by using the image block in the builder (GrapesJS). If that generates faulty markup, it’s the builder’s fault.

---

<div class="post-metadata">

**Author:** ![patryk.gruszka](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/patryk.gruszka/32/9813_2.png) [@patryk.gruszka](https://forum.mautic.org/u/patryk.gruszka)\
**Post date:** [March 26, 2024, 12:53pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/9 "2024-03-26T12:53:54Z")

</div>

This issue should be fixed in 5.1.0 - [DPMMA-2600 Fix for Grapesjs-Mjml self-closing tag issue by patrykgruszka · Pull Request #13431 · mautic/mautic · GitHub](https://github.com/mautic/mautic/pull/13431).

---

<div class="post-metadata">

**Author:** ![jakobpersson](https://avatars.discourse-cdn.com/v4/letter/j/5e9695/32.png) [@jakobpersson](https://forum.mautic.org/u/jakobpersson)\
**Post date:** [April 9, 2024, 7:38am UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/10 "2024-04-09T07:38:28Z")

</div>

I applied this patch to the dev branch and used the JS files to replace the ones in the default 5.0.3 release, and it seems to work. The dev version (5.x branch) has some strange issues and throws iconv() errors at me. The 5.0.3 version seems stable enough.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/1X/43c63600fe51440378769136903f1fa2a9a34102.png) [@system](https://forum.mautic.org/u/system)\
**Post date:** [April 10, 2024, 7:39pm UTC](https://forum.mautic.org/t/builder-hides-elements-that-are-visible-in-the-preview/31159/11 "2024-04-10T19:39:07Z")

</div>

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.