0

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?

Alexander Nitsche
  • 57
  • 7

1 Answers1

1

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.

Sebobo
  • 36
  • 2
  • Thanks, disabling `@process.contentElementWrapping` solved the issue. I removed it for the grid content element with `prototype(My.Site:Content.MyGrid) < prototype(Neos.Neos:ContentComponent) { @process.contentElementWrapping.@if.isNoAjaxRequest = ${!request.arguments.ajaxPartialKey} }` See [docs](https://neos.readthedocs.io/en/7.3/References/NeosFusionReference.html?highlight=contentelementwrapping#neos-neos-contentelementwrapping) for further details. – Alexander Nitsche Apr 12 '23 at 14:27