Foundation F6 Grid System in Neos

Hi,
was looking for foundation-grid for neos. Found dimaip’s https://github.com/psmb/Sfi.Grid.
Looks great, also without all the Content-Collection folder in each row. Is quite more transparent.
But if I use the New Content Button in the Inline-Editing in Grid-Column inside a Grid-Row, no popup «Create new» appears. (red circle)
On the structure-Area down-left in the Backend it works fine to create new Content. (green circle)

Is someone using dimaip’s foundation package and can include content with the Inline-Box-Button?
Do I have to do something different?

Unfortunately, the Package-Site on neos.io get first an ngix-error and is current disappeared under «Download & Extend». But I think it is the only one package for work with foundation Grid version 6.

  • If the Grid-Column is not inside from the Grid-Row -> the Button in Inline-Editing works fine.
  • Whenever the Grid - Column is inside the Grid-Row –> what it have to be <– the Inline-Editing Button «Create-New» don’t fire up the Pop-Up window «Create new».

Maybe there are more problems/bugs those I don’t realize yet. Dimensions/Workspaces. Does someone know more about?

Strange:
as the Grid-Column is included, the Inline-Edit-Button works fine.
With the Refresh-Button on structure or Publish-Button, the same (+)Inline-Edit-Button no longer acts. Only the Structure-Button act without problem for popup «Create new»-Panel.

There is an error in Console every click add a new:

3https://api.mixpanel.com/engage?data=eyIkdG9rZW4iOiI2NTQwMDNjNmRkZDAzZTg4Nz…3ContentModule-built.js?bust=a1dbaad4c902:416 Uncaught TypeError: Cannot read property 'options' of undefined(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416x.each.x.forEach @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416d.get @ ContentModule-built.js?bust=a1dbaad4c902:416t @ ContentModule-built.js?bust=a1dbaad4c902:416r._getPath @ ContentModule-built.js?bust=a1dbaad4c902:416t @ ContentModule-built.js?bust=a1dbaad4c902:416o @ ContentModule-built.js?bust=a1dbaad4c902:416u.connect @ ContentModule-built.js?bust=a1dbaad4c902:416N @ ContentModule-built.js?bust=a1dbaad4c902:416C @ ContentModule-built.js?bust=a1dbaad4c902:416E.u @ ContentModule-built.js?bust=a1dbaad4c902:416d.create.create @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend.createChildView @ ContentModule-built.js?bust=a1dbaad4c902:416r.merge.appendChild @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend.appendChild @ ContentModule-built.js?bust=a1dbaad4c902:416n.ViewHelper.r.Object.create.helper @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ VM2885:118(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend.render @ ContentModule-built.js?bust=a1dbaad4c902:416r.CoreView.r.Object.extend._renderToBuffer @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend._renderToBuffer @ ContentModule-built.js?bust=a1dbaad4c902:416r @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416r.Instrumentation.instrument @ ContentModule-built.js?bust=a1dbaad4c902:416r.CoreView.r.Object.extend.renderToBuffer @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend.createElement @ ContentModule-built.js?bust=a1dbaad4c902:416r.merge.insertElement @ ContentModule-built.js?bust=a1dbaad4c902:416r.View.r.CoreView.extend._insertElement @ ContentModule-built.js?bust=a1dbaad4c902:416r.flush @ ContentModule-built.js?bust=a1dbaad4c902:416h.end @ ContentModule-built.js?bust=a1dbaad4c902:416(anonymous function) @ ContentModule-built.js?bust=a1dbaad4c902:416

Did someone know, what the problem could be for the js-Button?
I would like to use the foundation-package as a model for own nested NodeTypes. But without error-Messages. To find the Problem in the javaScript I think the script is to big and complex.

Why some Element could be undefined in nested nodeTypes after refresh/publish?

The package does not provide CSS at all @mad. You need to include your foundation css.
Another package would be https://github.com/johannessteu/JohannesSteu.Bootstrap.GridSystem. But i also don’t provide css with that package. But you can specify class names and stuff to match your grid system

Hey stolle,
thanks for your explanation.

Foundation F6 CSS/SCSS was installed before. It works fine, without layout-problems. Also my own foundation nodeTypes works also fine (looked only on the layout) with nesting elements.
####But something is happen with the js-Button in the Inline-Editor.


Im quite sure, the js-Error is not triggered from foundation or CSS. I think it is because the nested nodeType. Something in js-Element is lost by nesting.
Reason to believe this: If I drag and drop the inner nodeType outside the wrapping nodeType -> no problem with button-action (of corse with layout :blush:) .
####Back inside the wrapping nodeType, the button has no function and the console shows the error. But Layout is back without deficit :wink:.


I will try your bootstrap-Grid-Package. Maybe (I’m quite sure) your Package will run with Inside-Edit-Button. So I could use it as Bolderplate for Foundation NodeType and Section NodeType. Would be great.

I would like to use Foundation F6, with his MobileFirst- and SCSS-Approach things. But who knows, maybe I swing back to Bootstrap.

You can use the css you want. Just make sure to wrap the classes correct. But the readme might be a bit outdated. Ping me on Slack if you need further help

Hi pamegli,
Your solution works! I don’t know, why you deleted your post. With inherit from TYPO3.Neos:ContentCollection the js-Error is gone!

###Solution

If js-Error in Console like:

Uncaught TypeError: Cannot read property 'options' of undefined(anonymous function) @ ContentModule-built.js

Maybe your NodeType has to inherit from ContentCollection:

'YourVendor.YourSite:YourNodeType':
  superTypes:
    'TYPO3.Neos:Content': TRUE
    'TYPO3.Neos:ContentCollection': TRUE
  ui:  

Thanks pamegli

(dimaip’s package https://github.com/psmb/Sfi.Grid is also updated and works now without errors)

1 Like