Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

cq:dialog dynamic class on form

Avatar

Level 5

AEM 6.2

Is it possible to add a dynamic class to the form element on a cq:dialog?

Current:

<form data-foundation-form-ajax="true" data-cq-dialog-pageeditor="/editor.html/content/business/enterprise/test-pages/components/pull-quote.html" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark" method="post" action="/content/components/pull-quote/_jcr_content/par/columncontrol/col0/pullquote" style="top: 57.75px; left: 912px;">

Wanted:

<form data-foundation-form-ajax="true" data-cq-dialog-pageeditor="/editor.html/content/business/enterprise/test-pages/components/pull-quote.html" class="coral-Form coral-Text cq-dialog foundation-form content foundation-layout-form cq-dialog-floating coral-Form--aligned coral--dark DYNAMIC-CLASS-HERE" method="post" action="/content/components/pull-quote/_jcr_content/par/columncontrol/col0/pullquote" style="top: 57.75px; left: 912px;">

Thank you in advance,

-Dean

4 Replies

Avatar

Level 10

That is an interesting use case. I am investigating this and will let you know. 

Avatar

Community Advisor

Hi Dean,

What is your usecase ?? I am not sure why would we need a custom class on a dialog !

Avatar

Level 5

Use Case

I'd like to be able to add a class to the cq:dialog so I can globalize a wide version of the dialog to accommodate the label, textfield and description WITHOUT wrapping.

Then I only have to maintain one set of CSS for all projects.

I could add a listener, but it would be much more convenient and less maintenance to add a property.

-Dean

Avatar

Level 10

Hey Dean --  for handling individual dialog styling you can do it in dialog event listener something like this (increases the dialog height)

http://experience-aem.blogspot.com/2015/04/aem-6-sp2-touchui-adding-dynamic-select-options.html