Content rendering using flux is not working in typo3 11

[shilpajh]

I tried to render content elements using flux in typo3 11 like below code :

<f:section name="Configuration">
flux:grid
flux:grid.row
<flux:grid.column name="main" colPos="100"/>
</flux:grid.row>
</flux:grid>
</f:section>

<f:section name="Main">

But not rendering in Front end. How can i render correctly?Can anybody help me?

[chriskrj]

Your missing some needed attributes and render statements here. I guess u want to render a container grid here.

In the Configuration part u define all settings u need for this grid.

<f:section name="Configuration">
  <flux:form id="gridcol1" label="Container 1 Col" description="Container 1 Col">
      <flux:form.option name="optionsettings">
        <flux:form.option.group value="Grid" />
        <flux:form.option.icon value="EXT:your_extension/Resources/Public/Icons/Content/GridCol1.svg" />
      </flux:form.option>

      <flux:grid>
        <flux:grid.row>
          <flux:grid.column label="Col 1" name="col1" colPos="1"></flux:grid.column>
        </flux:grid.row>
      </flux:grid>
  </flux:form>
</f:section>

Then you have a Preview Section for Backend Preview and a main section for Rendering the Container and the content that you set up in the TYPO3 Backend

<f:section name="Main">
<div id="c{record.uid}" class="Grid">
   <div class="u-container u-limitWidth">
      <div class="u-row">
          <div class="{classCols1}">
            <flux:content.render area="col1"/> // This is the place where the Content Element are renderd
          </div>
      </div>
   </div>
</div>
</f:section>

I hope this helps for now
Its an old repository but there u find like the basic structure of your Flux Elements
https://github.com/bootstraptheme-for-typo3/fluidbootstraptheme

[shilpajh]

Your missing some needed attributes and render statements here. I guess u want to render a container grid here.

In the Configuration part u define all settings u need for this grid.

<f:section name="Configuration">
  <flux:form id="gridcol1" label="Container 1 Col" description="Container 1 Col">
      <flux:form.option name="optionsettings">
        <flux:form.option.group value="Grid" />
        <flux:form.option.icon value="EXT:your_extension/Resources/Public/Icons/Content/GridCol1.svg" />
      </flux:form.option>

      <flux:grid>
        <flux:grid.row>
          <flux:grid.column label="Col 1" name="col1" colPos="1"></flux:grid.column>
        </flux:grid.row>
      </flux:grid>
  </flux:form>
</f:section>

Then you have a Preview Section for Backend Preview and a main section for Rendering the Container and the content that you set up in the TYPO3 Backend

<f:section name="Main">
<div id="c{record.uid}" class="Grid">
   <div class="u-container u-limitWidth">
      <div class="u-row">
          <div class="{classCols1}">
            <flux:content.render area="col1"/> // This is the place where the Content Element are renderd
          </div>
      </div>
   </div>
</div>
</f:section>

I hope this helps for now Its an old repository but there u find like the basic structure of your Flux Elements https://github.com/bootstraptheme-for-typo3/fluidbootstraptheme

I have added colPos also in the grid but still not rendering in Front End.
<flux:content.render area="col1"/>

[shilpajh]

Hi ,
since in typo311, vhs is not supporting i have rendered contents in flux using standard rendering method
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Content/Index.html

[chriskrj]

is col1 also the name of your flux:grid:column ?

Do you see anything in your <f:debug>{_all}</f:debug> ?

[NamelessCoder]

<flux:grid.column name="main" colPos="100"/>

You must select a colPos value between 0 and 100 (in otherwords, max value is 99).

[shilpajh]

Dear @NamelessCoder

Thanks

[NamelessCoder]

Closing this issue as "solved" but just in case you still face problems, feel free to ask for it to be reopened!