[SOLVED] How to get rid of unnecessary Div container in backend?

Why is there an additional Div container above a content element in the backend view?

The Div container is not rendered in the live view. Because I want to use flexbox in my CSS it’s not working anymore with an additional Div container between.

Here the rendered code in the frontend how it should be:

Here the rendered code in the backend with the additional Div container (with the class style__markActiveNodeAsFocused–forcedNode___2G2se):

It’s what Neos uses to identify a rendered node - if your CSS is not working, it sounds like you are using > rules and might have to adjust them

We use this in our CSS code. It only works if the container above has the class: “grid–container” :confused:

   .column--tablet-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

This sounds like a problem! You are using display:flex in the .grid-container. This enables a flex context for all its direct children. So your rendered markup breaks in the backend because the div above the .column–tablet-6 has got the flex content insteed of your column div.

I never run into this problem but it is fatal if the backend breaks the markup that easily!

Ah had an idea.
Maybe you could extend your grid css like this if you are strict in your grid markup!
.grid-container > div:not(.column) { display: flex; }

Update:
or (depends on how your grid works in neos):

you create the wrapping div (.grid-container) in your fusion for your nodetype which has that .column div

1 Like

Thank you very much @renewoerz for your help! After a few hours of trying, I finally found a solution.

The idea with div:not(.column) sounded really promising. Afterwards the additional div container had the classes I wanted and with an additional class “live” or “backend” it would also have been possible to distinguish both. However, somehow it still didn’t work.

I already used fusion code to add a wrapping div with my classes. This is the fusion code I use:

prototype(My.Package:ExampleContainer) {
    items = Neos.Neos:ContentCollection {
        nodePath = 'exampleItems'
        attributes.class = 'grid--container grid--special'
    }
}

After many tries I found out that the reason for this additional div container in the backend was because I had two div container on the same level in my HTML file. Surprisingly it works if I have only one div container. Here what I changed:

Before (renderes an additional div container above in the backend):

{namespace neos=Neos\Neos\ViewHelpers}
<div class="column column-4 column--tablet-6">
    Some content
</div>
<div class="lightbox" style="display: none">
    {images -> f:format.raw()}
</div>

After (renders no additional div container in the backend):

{namespace neos=Neos\Neos\ViewHelpers}
<div class="column column-4 column--tablet-6">
    Some content
	<div class="lightbox-hidden" style="display: none">
	    {images -> f:format.raw()}
	</div>
</div>
1 Like

That’s because every rendered node needs a single root element to find it in the backend, so if your template has two top level elements results in neos wrapping another around it to create a single root.

1 Like