Equivalent Touch UI class for .cq-wcm-edit

Avatar

Avatar

ashishkhadpe

Avatar

ashishkhadpe

ashishkhadpe

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Nupur_Jain

MVP

Avatar

Nupur_Jain

MVP

Nupur_Jain
MVP

27-08-2020

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

Answers (2)

Answers (2)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820
Arun_Patidar
MVP

27-08-2020

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

e.g.

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

 

Avatar

Avatar

Suraj_Kamdi

MVP

Avatar

Suraj_Kamdi

MVP

Suraj_Kamdi
MVP

27-08-2020

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