CODEWITHSUNDEEP
typo3fluid
Robert
Robert

Reputation: 592

TYPO3 Styling of selection Flexform

I have the following selection flexform

<config>
    <type>select</type>
    <items type='array'>
        <numIndex index='0' type='array'>
            <numIndex index='0'>freie Plätze</numIndex>
            <numIndex index='1'>freie Plätze</numIndex>
        </numIndex>
        <numIndex index='1' type='array'>
            <numIndex index='0'>ausgebucht</numIndex>
            <numIndex index='1'>ausgebucht</numIndex>
        </numIndex>
    </items>
    (...)
</config>`

I want to style the different answers with different colors in the FE

numIndex index='0' = green
numIndex index='1' = red

but I don't find any solution so I can't offer any idea. Sorry for that.

I use TYPO3 7.6.16 with DCE and a fluid template with a responsive table

<f:for each="{field.kurs}" as="kurs">
<tr>
    <td>(...)</td>
    <td data-label="Status">{kurs.kursStatus}</td>
    <td>(...)</td>      
</tr>
(...)

Upvotes: 0

Views: 367

Answers (2)

Robert
Robert

Reputation: 592

I couldn't use the idea by @Heinz Schilling in DCE but I found another solution for DCE

This is the flexform

<config>
<type>select</type>
<items type='array'>
    <numIndex index='0' type='array'>
        <numIndex index='0'></numIndex>
        <numIndex index='1'></numIndex>
    </numIndex>
    <numIndex index='1' type='array'>
        <numIndex index='0'>freie Plätze</numIndex>
        <numIndex index='1'>1</numIndex>
    </numIndex>
    <numIndex index='2' type='array'>
        <numIndex index='0'>ausgebucht</numIndex>
        <numIndex index='1'>2</numIndex>
    </numIndex>                 
</items>
<size>1</size>
<minitems>1</minitems>
<maxitems>1</maxitems>

and this is the fluid template 

<f:if condition="{kurs.kursStatus}==1">                         
     <td data-label="Status" class="green">freie Plätze</td>
</f:if>
<f:if condition="{kurs.kursStatus}==2">                         
     <td data-label="Status" class="red">ausgebucht</td>
</f:if>

Upvotes: 1

Heinz Schilling
Heinz Schilling

Reputation: 2252

Your select is in Flexform? Try this:

<settings.offer>
    <TCEforms>
        <label>Offer</label>
        <config>
            <type>select</type>
            <renderType>selectSingle</renderType>
            <items>
                <numIndex index="1">
                    <numIndex index="0">freie Plätze</numIndex>
                    <numIndex index="1">free</numIndex>
                </numIndex>
                <numIndex index="2">
                    <numIndex index="0">ausgebucht</numIndex>
                    <numIndex index="1">booked-up</numIndex>
                </numIndex>
            </items>
        </config>
    </TCEforms>
</settings.offer>

In template add css classes:

<f:for each="{field.kurs}" as="kurs">
    <ul>
        <li>(...)</li>
        <li class="{f:if(condition: {settings.offer} == 'free', then: 'green', else 'red') }"></li>
        <li>(...)</li>
    </ul>
(...)

Upvotes: 1

Related Questions