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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Equivalent Touch UI class for .cq-wcm-edit

ashishkhadpe
Level 3
Level 3

Hi All,

 

We have few mark up defined in our CSS library as below in CQ edit mode : 

 

 

.cq-wcm-edit .formBuilder .section.hiddenField,
.cq-wcm-edit .formBuilder .section.hiddenFieldMulti {
    display: block;
}

 

 

I assume that .cq-wcm-edit only works with AEM classic UI. Any help on how we can migrate this to touch UI or any similar class we can use to define.

1 Accepted Solution
Nupur_Jain
Correct answer by
Community Advisor
Community Advisor

Hi @ashishkhadpe 

 

Just like .cq-wcm-edit, there is a class ". aem-AuthorLayer-Edit" added to <html> node of the page added in iframe in Touch UI mode.

 

You can easily use this class to replace classic based css.

 

Screenshot from 2020-08-27 18-13-35.png

 

Hope it helps!

Thanks!

Nupur

View solution in original post

3 Replies
Nupur_Jain
Correct answer by
Community Advisor
Community Advisor

Hi @ashishkhadpe 

 

Just like .cq-wcm-edit, there is a class ". aem-AuthorLayer-Edit" added to <html> node of the page added in iframe in Touch UI mode.

 

You can easily use this class to replace classic based css.

 

Screenshot from 2020-08-27 18-13-35.png

 

Hope it helps!

Thanks!

Nupur

View solution in original post

Suraj_Kamdi
Community Advisor
Community Advisor

@ashishkhadpe Hello Ashish you need to use coral classes to achieve the same functionality for touch UI dialogs?

Arun_Patidar
Community Advisor
Community Advisor

you can use .cq-Editable-dom class for touch UI edit mode

e.g.

.teaser.cq-Editable-dom {
    margin: 10px 0px;
}