FluidTYPO3 duplicated Content Modules with Flux Grid at TYPO3 Backend

Question

I'm using TYPO3 7.6with the latest Flux-, VHS- and FluidcontentExtensions (FluidTYPO3). I've wrote a new FLUX-Content Element, a Tab-Container from Zurb Foundation 6. The element is working fine (frontend), but at backend I have a row with my tabs and also columns .. sth. will dublicated my tabs and the content inside?! Already cleared Cache.

Here's a screenshot. The Tab-Elements will be dublicated, I don't know why?

My FLUX FCE:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="tabs" options="{group: 'LLL:typo3conf/ext/myelements/Resources/Private/Language/locallang.xlf:grid.elements'}">

            <flux:form.sheet name="tabs">
                <flux:form.section name="tabs">
                    <flux:form.object name="tab">

                        <flux:field.input name="title" />
                        <flux:field.input name="class" />
                        <flux:field.checkbox name="active" />

                    </flux:form.object>
                </flux:form.section>
            </flux:form.sheet>

            <flux:grid>
                <flux:grid.row>
                    <f:if condition="{tabs}">
                        <f:for each="{tabs}" as="tab" iteration="iteration">
                                <flux:form.content name="content.{iteration.index}" label="Tab {iteration.cycle}" />
                        </f:for>
                    </f:if>
                </flux:grid.row>
            </flux:grid>

        </flux:form>
    </f:section>



    <f:section name="Preview">
        <flux:widget.grid />
    </f:section>



    <f:section name="Main">

        <f:render section="Tabs" arguments="{_all}" />

        <div class="tabs-content" data-tabs-content="tabs-{record.uid}">
            <f:if condition="{tabs}">
                <f:for each="{tabs}" as="tab" iteration="iteration">
                    <div class="tabs-panel {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}" id="panel-{record.uid}-{iteration.index}">
                        <flux:content.render area="content.{iteration.index}" />
                    </div>
                </f:for>
            </f:if>
        </div>

    </f:section>



    <f:section name="Tabs">

        <f:if condition="{tabs}">

            <ul class="tabs" data-tabs id="tabs-{record.uid}">
                <f:for each="{tabs}" as="tab" iteration="iteration">
                    <li class="tabs-title {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}">
                        <a href="#panel-{record.uid}-{iteration.index}" aria-selected="true">{tab.tab.title}</a>
                    </li>
                </f:for>
            </ul>

        </f:if>

    </f:section>

</div>

Answer 1

Thank you Viktor.

It's necessary to delete all flux.grid-stuff from yout template. The whole preview section and some grid/rows at the configuration section.

That's the correct tab-template for fluxand zurb foundation:

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="Tabs" options="{group: 'LLL:typo3conf/ext/customerproject/Resources/Private/Language/locallang.xlf:grid.elements'}">

            <flux:form.sheet name="tabs">
                <flux:form.section name="tabs">
                    <flux:form.object name="tab">

                        <flux:field.input name="title" />
                        <flux:field.input name="class" />
                        <flux:field.checkbox name="active" />

                    </flux:form.object>
                </flux:form.section>
            </flux:form.sheet>


            <f:if condition="{tabs}">
                <f:for each="{tabs}" as="tab" iteration="iteration">
                        <flux:form.content name="content.{iteration.index}" label="Tab {iteration.cycle}" />
                </f:for>
            </f:if>


        </flux:form>
    </f:section>






    <f:section name="Main">
        <div class="flux grid01Tabs">

            <f:render section="Tabs" arguments="{_all}" />

            <div class="tabs-content" data-tabs-content="tabs-{record.uid}">
                <f:if condition="{tabs}">
                    <f:for each="{tabs}" as="tab" iteration="iteration">
                        <div class="tabs-panel {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}" id="panel-{record.uid}-{iteration.index}">
                            <flux:content.render area="content.{iteration.index}" />
                        </div>
                    </f:for>
                </f:if>
            </div>

        </div><!-- / tabWrap -->
    </f:section>



    <f:section name="Tabs">

        <f:if condition="{tabs}">

            <ul class="tabs" data-tabs id="tabs-{record.uid}">
                <f:for each="{tabs}" as="tab" iteration="iteration">
                    <li class="tabs-title {f:if(condition: '{tab.tab.active} == 1', then: 'is-active')}">
                        <a href="#panel-{record.uid}-{iteration.index}" aria-selected="true">{tab.tab.title}</a>
                    </li>
                </f:for>
            </ul>

        </f:if>

    </f:section>

</div>

Answer 2

This is the problem:

<flux:widget.grid />

According to Release Notes of flux 7.2:

Preview Widget replaced

We have replaced the way Flux generates previews when a Grid is involved. Before, Flux would render the Grid from the Fluid template file which means the template had to be parsed (or loaded from compiled cache) and then rendered, involving a significant amount of processing. The content element container areas are now rendered by a special View class, significantly increasing performance when working with multiple nested elements.

The new behaviour:

• Renders a Grid as content element container in the page module if your template defines one, regardless of whether or not you have a Preview section.

• Deprecates flux:widget.grid which no longer has any function.

• Removes all support for setting the Fluid template used to render the Grid.

Basically, we sacrifice the rarely used template replacement feature for increased performance in very frequently executed code.

So, simply remove complete Preview section from a template.