Adobe Experience Manager

View profile · 27-08-2020

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.

View profile · 27-08-2020

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 profile · 27-08-2020

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

e.g.

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

View profile · 27-08-2020

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

Equivalent Touch UI class for .cq-wcm-edit