How to layout the flux grid view in the backend?

Question

I'm using flux (7.0.0) and fluidcontent (4.0.0) on TYPO3 6.2. My content model is as follows, using the "Composite Pattern":

• There is a content element "row" (in different flavors), which is a container element, to contain more content elements. It has only one subcolumn of content.
• There are "leaf" content elements, to display the actual content. Examples would be "single image", "text", but also "row". Each of these leafs has a width as property.

The whole thing is rendered for bootstrap, and within each row, the children are just floated left.

My question is: How do I layout the content elements in the backend grid view to resemble the frontend output? It would be a great improvement if each content element would get a display-width added from its properties and be floated left.

The grid definition in the content element looks like this:

<flux:flexform.grid>
    <flux:flexform.grid.row>
        <flux:flexform.content name="rowcontent" label="{f:translate(id: 'row.column.label')}" />
    </flux:flexform.grid.row>
</flux:flexform.grid>

An example of the current layout in the backend. Each of the image content elements has 25% width set to it. It would be much nicer, if they would be beside each other:

Answer 1

In the preview section of your template you would normally use <flux:widget.grid />.

Instead:

1) Copy over the files from flux / Resources / Private / Templates / ViewHelpers / Widget / Grid / and flux / Classes / ViewHelpers / Widget / to your extension.

2) Rename inside everything you copied to fit your vendor prefix / namespace.

3) Include that new namespace inside your row template and use <YourNamespace:widget.grid /> for the preview.

4) Now you can customize the templates you copied over so that they are floated instead of in a table.