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:
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
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:
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):
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.