Expand my Community achievements bar.

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

Level 10

Hi Dean,

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

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