Strange behavior for part in layout

Bugs
1

XP 6.15.4:

We experiences a strange behavior for one of our elements.
Its a 1.col-layout and it contains a banner.
Its saved and it works good, but in admin it looks like there is another part there.
This is not accessible and you cant click it.
The components viewer tells me that dere is only one part there.
(upload://zLyujA1seV3YqnIU5O45LMAqKHs.jpg)

2

image
image1903×886 479 KB

3

Hi Anders,

This is commonly caused by the HTML in the view-file not being done properly (like using multiple root elements), or by the end-result HTML being created by JavaScript (something the Page Editor will struggle with). Could you share with me the HTML?

Best regards,
Bobby

4 
<div data-th-attr="data-componentid=${componentId},data-personalizable=${personalizable}" data-th-attrappend="__${attrAppend}__"
 class=" part banner regularBanner top-padding-30-mdlg bottom-padding-30" data-th-gap="${rowGap}"
 data-th-id="${id}" data-th-style="|background-image: url(${imageUrl}); background-size: cover; background-position-y: center; width:100%;|"
 data-th-fullWidth="${fullWidth}">
<div class="container">
    <div class="row">
        <div class="col-lg-7 top-padding-20">
            <div data-th-remove="${borderHeadingText} != '' ? none : tag" class="borderHeading borderOverlay" data-th-classappend="${borderHeadingColor}" data-th-text="${borderHeadingText}"/>
            <div class="v-center stb-transparent" style="justify-content: left !important;">
                <span class="banner-box" data-th-classappend="${overlayColor}" style="width:100%">
                    <span data-th-utext="${html}"/>
                     <a data-th-if="${optionLink and optionLink.text}" class="optionlink-url" data-th-classappend="${optionLink.class}" data-th-target="${optionLink.target}" data-th-href="${optionLink.url}" data-th-text="${optionLink.text}"/>
                </span>
            </div>
        </div>
    </div>
</div>
5

Your HTML is broken. The first tag is never closed. Close it to fix the issue you’re having =)

6

Sorry.
It was closed. Just me not copying correctly.

7

Oh, then we’ll dig deeper.

I’m not sure what these Thymeleaf-commands does: data-th-fullWidth, data-th-gap and data-th-attrappend. Can’t find them in the TL-docs. I’d start by removing them, see if behaviour stabilizes.

But basically, what XP does is to first execute your backend JS (thus merging it with your Thymeleaf). This gives a rendered HTML that the Page Editor tries to work with expecting only one root-element. Any JavaScript running client-side that changes the DOM will affect the Page Editor. In earlier versions of XP, adding multiple root elements (even a html-comment is a root element) in the same view-file messed with the Page Editor.

8

Hi.
Thanks for your answers.
I found a javascript that changed the HTML on document.ready().
This caused the “error”

1 Like