Inserting class into div based on dialog input | Community
Skip to main content
C
Codelime
Level 4
April 3, 2024
Solved

Inserting class into div based on dialog input

  • April 3, 2024
  • 1 reply
  • 479 views

I'm trying to insert one of three possible class names, which are available in the dialog select called "Theme". The three values are "theme-light, theme-neutral, and theme-dark". Here's what I have for the dialog (content.xml):

<theme jcr:primaryType="cq:WidgetCollection" sling:resourceType="granite/ui/components/coral/foundation/form/select" defaultValue="theme-light" fieldDescription="Select the component theme." fieldLabel="Select theme" name="./theme" emptyText="Select a theme"> <items jcr:primaryType="nt:unstructured"> <light jcr:primaryType="nt:unstructured" text="Light theme" value="theme-light"/> <neutral jcr:primaryType="nt:unstructured" text="Neutral theme" value="theme-neutral"/> <dark jcr:primaryType="nt:unstructured" text="Dark theme" value="theme-dark"/> </items>

Here's what I have for the HTML:

<div class="container ${theme.value}"

When I view the page, the class is blank. What am I missing? 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Codelime

I discovered I had the HTL wrong and have corrected it to this:

<div class="container ${properties.theme}"

1 reply

C
CodelimeAuthorAccepted solution
Level 4
April 3, 2024

I discovered I had the HTL wrong and have corrected it to this:

<div class="container ${properties.theme}"
    Terms & ConditionsAccessibility statement

    Loading footer...