[Resolved] Conditional fields and conditional css

[Author]

Posts

[samuelH]

Hi,
I have a conditional field, that I would like to change the backround color of depending on the conditional value.

I have put in this code:

<div class="q-gray1">
Status: [types field='statusbeskrivelse'][/types]

<div class="status">[wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '2' )"]status-red[/wpv-conditional] [wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '1' )"]status-gronn[/wpv-conditional]</div></div>

And this CSS
status-red {background-color: red;}
status-gronn {background-color: green;}

The conditional field shows the text value, but are not changing the background color. Where am I doing wrong here?

The field should show the value of the condition (This works), but not the words "status-gronn" The background if the field should turn green.

[Jamal]

Hello and thank you for contacting the Toolset support.

I think that both your view and CSS codes are not correct. The CSS code should use (.) before the class name. Then the name should be used inside the class attribute of your div tag. Try the following:
1. CSS

.status-red {background-color: red;}
.status-gronn {background-color: green;}

2. View:

<div class="q-gray1">
Status: [types field='statusbeskrivelse'][/types]

<div class="status [wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '2' )"]status-red[/wpv-conditional] [wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '1' )"]status-gronn[/wpv-conditional]">[wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '2' )"]status-red[/wpv-conditional] [wpv-conditional if="( $(wpcf-statusbeskrivelse) eq '1' )"]status-gronn[/wpv-conditional]</div></div>

Read more about the class CSS selector here hidden link

[samuelH]

My issue is resolved now. Thank you!