My Neos 7 website has a grid content element whose elements are loaded via AJAX which displays fine in the frontend. The same grid breaks in the Neos backend because the AJAX response is enriched by a wrapping DIV that contains Neos backend metadata, and this additional wrapping element breaks the layout because the CSS framework assumes that the grid structure is grid > grid elements, not grid > Neos metadata div > grid elements. How to handle this without interfering too much?
This is a working frontend AJAX response:
<a class="uk-link-toggle" href="/de/..">
<div class="uk-card uk-card-default uk-card-hover">
..
</div>
</a>
<a class="uk-link-toggle" href="/de/..">..</a>
..
and this the related breaking backend AJAX response:
<div data-__neos-fusion-path=".." data-__neos-node-contextpath="..">
<a class="uk-link-toggle" href="/neos/preview?.." data-__neos-fusion-path=".." data-__neos-node-contextpath="..">
<div class="uk-card uk-card-default uk-card-hover">
..
</div>
</a>
<script data-neos-nodedata>..</script>
<a class="uk-link-toggle" href="/neos/preview?.." data-__neos-fusion-path=".." data-__neos-node-contextpath="..">..</a>
<script data-neos-nodedata>..</script>
..
</div>
and all grid CSS framework rules are of this strict type:
.uk-grid > * { margin: 0; }
.uk-grid > * > :last-child { margin-bottom: 0; }
.uk-grid > * { padding-left: 30px; }
Additional information: If I manually remove the wrapping metadata div in the browser debugger, it displays properly. Are there any drawbacks if I just remove the wrapping metadata in the AJAX handler?
Neos always adds a wrapper to ContentCollections to make them editable in the backend. You can disable/remove the @process.contentElementWrapping process in the AJAX case if you don't need the editing features. Or you extract the elements before inserting them somehow.